6

有很多网站（例如 www.9gag.com）会检查您的滚动百分比并确定您是否下降了 80%。如果是这样，它会显示更多内容。

我想看到的代码示例：

$(window).scroll(function () {
    if(scroll.height >= 80%) {
        // the scroll is about 80% down.
    }
});

我想知道如何检查滚动是否下降了大约 80%，就像那些网站一样？

4

5 回答 5

7

您检查页面的高度，并将该值与当前位置进行比较。如果当前位置是高度的 80%，则运行一些代码。

$(window).scroll(function ()
{
    var content_height = $(document).height();
    var content_scroll_pos = $(window).scrollTop();
    var percentage_value = content_scroll_pos * 100 / content_height;

    if(percentage_value >= 80)
    {
        console.dir("the scroll is about 80% down.");
    }
});

没有测试它，但应该做你想做的:)

感谢 Alvaro 将我的代码添加到小提琴中：http: //jsfiddle.net/2wSSS/7/

于 2013-09-18T09:14:15.573 回答
1

这是你必须做的：

//when scrolling...
$(window).scroll(function() {
    var windowsHeight = $(document).height() - $(window).height();
    var currentScroll = $(window).scrollTop();

    //if I scroll more than 80%
    if( ((currentScroll *100) / windowsHeight) > 80){
         //do whatever
   }
});

活生生的例子：http: //jsfiddle.net/2wSSS/6/

于 2013-09-18T09:17:55.187 回答
1 
$( document ).ready( function() {
    $( window ).bind( 'scroll', function( event ) {
        var win = $( this ),
            doc = $( document ),
            winH = win.height(),
            winT = win.scrollTop(),
            docH = doc.height(),
            interval = parseInt( winH * 0.2, 10 );

        if( docH - winH - winT < interval ) {
            console.log( 'the scroll is about 80% down' );
        }

    });
});
于 2013-09-18T09:40:14.337 回答
0

由于没有选择的答案，这就是我用来检测距离底部多远的像素，而不是百分比：

if($(window).scrollTop() + $(window).height() > $(document).height() - 300) { });
于 2013-09-18T11:34:50.507 回答
0

尝试

$(window).scroll(function () {

    if (($(window).scrollTop() + $(window).height()) > 0.8 * $(document).height()) {
        $('body').append("<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>")
    }
})

小提琴

当页面滚动到 80% 以下时添加动态内容的示例

于 2013-09-18T09:17:48.387 回答