时间戳

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

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

问题描述

我有一个完整的 div 和背景图片的登录height页面width。我在前面浮动一个固定的 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);
}

标签： javascriptjqueryhtmlcss

解决方案

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

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:) 更新代码以反映相同。

推荐阅读