第二 Header 根据滚动淡入或淡出

Question

我正在编写网站代码，我想要 2 个 headers..一个在用户位于页面顶部时显示，第二个在您滚动时显示。我尝试使用 jquery 来做到这一点，它的工作方式与预期的一样（页面顶部是 "top"，当我向下滚动时 "top2"），但是当我滚动回到顶部，第二个（应该淡出）filckers/blinks 一次然后淡出。

$(function () {
    'use strict';
    $(window).scroll(function () {
        var scrollval = $(window).scrollTop();
        if (scrollval >= 50) {
            $("#top").fadeOut('slow');
            $("#top2").fadeIn('slow');
       }
       if (scrollval <= 10) {
           $("#top").fadeIn('slow');
           $("#top2").fadeOut('slow');
       }
    });
});

HTML

<div id="top">....</div>
<div id="top2>...</div>

CSS

#top {
    background:red;
    width:100%; 
    height: 50px; 
} 
#top2 {
    display: none; 
    position:fixed; 
    top:0; 
    left: 0; 
    background:black; 
    width:100%; 
    height: 50px; 
    margin:0 auto; 
}

Answer 1

问题是由于 .fadeOut('slow') 和 .fadeIn('slow');..下面的代码将解决这个问题

html

<div id="top"></div>
<div id="top2"></div>

JS

$(function () {
    'use strict';
    $(window).scroll(function () {
        var scrollval = $(window).scrollTop();
        if (scrollval >= 50) {
            $("#top").css("opacity", 0);
            $("#top2").css("opacity", 1);
        }
        if (scrollval <= 10) {
            $("#top").css("opacity", 1);
            $("#top2").css("opacity", 0);
        }
    });
});

CSS

#top {
    background:red;
    width:100%; 
    height: 50px; 
} 
#top2 {
    opacity: 0;
    position:fixed; 
    top:0; 
    left: 0; 
    background:blue; 
    width:100%; 
    height: 50px; 
    margin:0 auto; 
    transition: opacity 1s ease;
}

谢谢！

第二 Header 根据滚动淡入或淡出

Second Header fading in or fading out depending of scrolling

html

css

jquery

header

fading