Question

当用户滚动离开页面顶部时，我使用下面的jquery来删除或添加类到div（#sidebar）。如您所见，我将脚本设置为仅在清除500像素后应用。这在页面顶部非常有效，但如果用户位于页面的下方（他们可以手动强制显示#sidebar），脚本仍然会删除.active类，但它会忽略500延迟。我认为这可能是滥用scrollTop函数，但我不确定要使用什么。我试过滚动，但这完全破坏了脚本。

非常感谢任何建议！

JSFiddle

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

Answer 1

试试这个：

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");
    }
});

我做的是，我创建了一个“线”元素来测试侧边栏的位置..当它们相距500px时，侧边栏消失。当您单击切换时，线移动到侧边栏的位置。使用此代码：

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

<强>更新

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

将此行添加到if语句中，因此当侧边栏消失时，该行返回到顶部，直到通过单击再次调用该行。

Answer 2

而不是

$(window).scrollTop()>100

尝试使用

$(document).scrollTop()>100

你可以从这个http://jsfiddle.net/gk78du6m/

中得到一些想法

尝试包含此功能

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

Answer 3

您可以使用全局变量（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();设置为 -

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

以下是JSFiddle

进一步向下页时出现scrollTop问题

3 个答案: