javascript - 我有一个固定的 div，我正在使用 jquery 在滚动时淡出。它工作正常，但如果我半途而废并引用 div 显示的页面

Question

我有一个带有完整 height 和 width div 以及背景图片的着陆页。我在前面 float 了一个固定的 div，并在用户向上滚动时淡出它。这很好，除非有人在页面下降到一半时刷新页面，然后固定的 div 再次出现。如何仅在“首屏”显示 div？

<script type="text/javascript">
jQuery(function( $ ){
$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $(".blue_bar").fadeIn();
    } else {
        $(".blue_bar").fadeOut();
    }
});
	
	});
</script>

.blue_bar {
    width:75%;
    max-width:900px;
    padding: 40px 65px 40px 65px;
    position:fixed;
    bottom:95px;
    right:55px;
    background-color:rgba(0,105,170,0.8);
}

Answer 1

那是因为如果页面重新加载，您的淡出代码不会执行。因此，您可以做的是将该逻辑包含在一个函数中，并在页面加载和滚动时调用它。

HTML

<div class="blue_bar" style="display:none;">
    blah
</div>

JS

jQuery(function( $ ){
    let processFade = function(){
        var scrollPos = $(window).scrollTop();
        if (scrollPos <= 0) {
            $(".blue_bar").fadeIn();
        } else {
            $(".blue_bar").fadeOut();
        }
    };
    $(window).on("scroll load", function () {
        processFade();
    });
    $(document).ready(function () {
        processFade();
    });
});

更新:“div 出现，然后很快再次消失。”

解决方案非常简单，只需从隐藏的 div 开始 :) 更新代码以反射(reflect)相同的情况。