向下滚动页面时出现 scrollTop 问题

Question

当用户滚动离开页面顶部时，我正在使用下面的 jquery 删除或添加 class 到 div (#sidebar)。如您所见，我将脚本设置为仅在清除 500 个像素后应用。这在页面顶部完美运行，但如果用户位于页面下方（他们可以手动强制#sidebar 出现）脚本仍会删除 .active class 但它会忽略 500 延迟。我认为这可能是对 scrollTop 函数的误用，但我不确定应该使用什么。我试过滚动，但这完全破坏了脚本。

非常感谢任何建议！

JSFiddle

$(window).scroll(function(){
    if($(window).scrollTop()>500) {
        $("#sidebar").removeClass("active");
    }
    else {
        $("#sidebar").addClass("active");
    }
});

Answer 1

而不是

$(window).scrollTop()>100

尝试使用

$(document).scrollTop()>100

你可以从中得到一些想法http://jsfiddle.net/gk78du6m/

尝试包含此功能

$('#sidebarToggle').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 200);
        return false;
    });

Answer 2

您可以通过使用全局变量 (currentTop) 来实现这一点，例如-

/* Add a global variable */
var currentTop = 0;
$(window).scroll(function() {
    /* Compare with "currentTop + 500" but not only "500" */
    if($(document).scrollTop() > currentTop + 500) {
        $("#sidebar").removeClass("active");
    }
    else if ($(document).scrollTop() <= 400) {
        $("#sidebar").addClass("active");
    }
});

并且当您单击#sidebarToggle 锚点然后单击时您可以设置currentTop = $(window).scrollTop(); like-

sidebarToggle.onclick = function (e) {
        var active = 'active';
        /* Update currentTop like below */
        currentTop = $(window).scrollTop();
        e.preventDefault();
        toggleClass(sidebar, active);
        toggleClass(sidebarToggle, active);
    };

这是JSFiddle

Answer 3

试试这个：

https://jsfiddle.net/hLaxxp3m/4/

var relativeY = $("#sidebar").offset().top - $(".line").offset().top;

$(window).scroll(function(){

relativeY = $("#sidebar").offset().top - $(".line").offset().top;    
console.log(relativeY);
    if(relativeY >  500 || relativeY < -500 ) {
        $("#sidebar").removeClass("active");
        $(".line").css("top","0")
    }
    else {
        $("#sidebar").addClass("active");
    }
});

我所做的是，我创建了一个 "line" 元素来测试侧边栏的位置。当它们与侧边栏相距 500 像素时 disapears.When 您单击切换按钮，该行移动到侧边栏的位置。使用此代码：

var topScroll = $(window).scrollTop();
$(".line").css("top",topScroll);

更新

 $(".line").css("top","0")

将此行添加到 if 语句中，因此当侧边栏消失时，行 returns 到顶部，直到它被点击再次调用。

向下滚动页面时出现 scrollTop 问题

scrollTop issues when further down page

jquery

scroll

scrolltop