Question

我正在编写一个网站，我希望有2个标题..当用户在页面顶部时显示，在滚动时显示第二个标题。我尝试用jquery做到这一点，它的工作方式与它应该做的一样（在页面顶部是＆＃34;顶部＆＃34;，当我向下滚动＆＃34; top2＆＃34;）但是当我滚动回顶部时，第二个（那个应该淡出的）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;
}

谢谢！

第二个标题根据滚动淡入或淡出

1 个答案: