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

Question

I have a landing page with a full height and width div and a background image. I am floating a fixed div in front and fading it out as the user scrolls up. It's great unless someone refreshes the page when they're half way down, then the fixed div shows up again. How do I only show div if it's "above the fold"?

 <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

Thats because your code for fading out doesn't get executed if the page reloads. So what you can do is enclose that logic inside a function and call it on page load as well as on scroll.

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

Update: " The div shows up, then quickly disappears again. "

The solution is pretty simple, Just start out with a hidden div :) Updated the code to reflect the same.