javascript - 如何使用 Javascript 检测垂直滚动条的位置

标签 javascript jquery scroll position

if  ($(window).scrollTop() == $(document).height() - $(window).height()){

这句话在滚动时返回真,比方说,滚动条的“末端”。

好的,

我怎么知道它何时达到 80%(还剩 20%)???

我正在尝试这样的表达:

if  ($(window).scrollTop()*2 == $(document).height() - $(window).height()){  // at the middle?
if  ($(window).scrollTop() == ($(document).height() - $(window).height())+100){    /// 100px left?

但是他们都没有返回 true..

知道为什么吗?

提前致谢!

最佳答案

已编辑

看这里:http://jsfiddle.net/CoolEsh/aQcBZ/7/

HTML

<div style="height:400px;">1 div</div>
<div style="height:300px;">2 div</div>
<div style="height:400px;">3 div</div>
<div style="height:200px;">4 div</div>
<div style="height:600px;">5 div</div>

JS

var handlerObj = {

    _pageAboveCenter: null,

    init: function()
    {
        handlerObj._pageAboveCenter = handlerObj._isPageAboveCenter();

        $( window ).scroll( handlerObj._handleScroll );
    },

    _handleScroll: function()
    {
        var curentPositionAboveCenter = handlerObj._isPageAboveCenter();
        if ( curentPositionAboveCenter != handlerObj._pageAboveCenter )
        {
            handlerObj._centerIntersection();
            handlerObj._pageAboveCenter = curentPositionAboveCenter;
        }

    },

    _centerIntersection: function()
    {
        console.log( "Center intersected!" ); // this is for firebug console
    },

    _isPageAboveCenter: function()
    {
        if ( ( Math.floor( $( window ).height() / 2 ) + $(window).scrollTop() ) > ( Math.floor( $(document).height() / 2 ) ) )
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

$( document ).ready( handlerObj.init );

如果有人快速滚动,这个示例工作事件。我在页面加载时初始化变量 _pageAboveCenter。然后在滚动事件上我检查当前位置(它是在中心上方还是下方),如果 curentPositionAboveCenterhandlerObj._pageAboveCenter 的值不同,那么我调用中心相交的方法。

关于javascript - 如何使用 Javascript 检测垂直滚动条的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5401877/

相关文章:

Javascript - getAttribute 不适用于 getElementsByTagName

jquery live 和 livequery

javascript - 检测点击,检查属性值和里面的文字,显示元素

javascript - 使用 jQuery 同步滚动?

javascript - 我应该如何使用 JQuery 更改鼠标悬停时 DOM 元素的背景颜色?

javascript - 如何将包含按钮的 Kendo Grid 中的列的值发送到 ClientTemplate?

javascript - 如何使用代码在asp web表单中最后聚焦textarea

javascript - 为什么使用jquery ajax加载时没有定义jquery pjax

gwt - 如何使用最大高度和溢出-y : scroll? 自动滚动 GWT SuggestBox

css - 在 Ionic 1.3 中禁用 native 滚动