jquery滚动不透明度功能

Question

我需要在向下滚动页面时隐藏一个名为“#left_column”的div。

当您开始向上滚动时（不仅当您位于页面顶部时），#left_column应再次可见。

我需要的正是您在此处看到的内容：https://www.ssense.com/women

我找到了这段代码，但只有当我位于页面顶部时它才会再次显示，另一个问题是当你快速滚动时，它没有响应。

var target = $('#left_column'); var targetHeight = target.outerHeight(); $(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
    target.css('opacity', scrollPercent);
} });    

我非常感谢你对此的帮助！

提前致谢，

Answer 1

使用scrollTop方法并检查是否向上或向下滚动：

var lastScrollTop = 0;

$(window).scroll(function() {

    var scrollTop = $(this).scrollTop();

    if (scrollTop > lastScrollTop) {

        $('#box').hide();
    } else {

        $('#box').show();
    }

    lastScrollTop = scrollTop;
});

JSFiddle demo

修改

帮助您调试：https://developer.mozilla.org/en-US/docs/Web/API/console.log

var lastScrollTop = 0;

$(window).scroll(function() {

    // Add this line to log the 2 values in your console
    console.log(scrollTop, lastScrollTop);

    var scrollTop = $(this).scrollTop();

    if (scrollTop > lastScrollTop) {

        $('#box').hide();
    } else {

        $('#box').show();
    }

    lastScrollTop = scrollTop;
});

Answer 2

您可以在jquery中使用ScrollTop（）函数来处理此作业

$('#toTop').fadeIn();
var LastPos = 0;
var CurrentPos = 0;
$(window).scroll(function() {
    CurrentPos = $(this).scrollTop();

    if (CurrentPos > LastPos) {
        $('#toTop').fadeOut();
    } else {
        $('#toTop').show();
    }       
    LastPos = CurrentPos;
});

jsfiddle Demo