Question

我有一个导航功能，它有两个部分，第一个功能不起作用，但第二个功能起作用。

如果你向下滚动你会看到导航淡入滚动..我想要完成的是有相同的链接显示没有背景颜色，然后当你向下滚动链接向上滚动网站然后相同的链接会与黑色导航栏淡入。

<div id="menu" style="display: block;">Top Bar</div>
<header id="header-active">
    <ul>
        <li>Nav links</li>
    </ul>
</header>
<div id="hero"></div>
<div style="height: 600px;">section 1</div>

Jquery的

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 300) {
                $('#header-active').fadeIn(500);
            } else {
                $('#header-active').fadeOut(500);
            }
        });
    });
})(jQuery);

Answer 1

你是说这样的意思吗？ https://jsfiddle.net/f7Lnthm1/3/

基本上，我将CSS与#header及其有效版本分开。你可以使用CSS作为动画（最好还是比JQuery更好。

CSS：

#header {
  width:100%; 
  height:75px; 
  color: #000;
  z-index:9999;
  background: none;
}

#header.active {
  position:fixed;
  top:0px;
  background:#000;
  color: #fff;
  transition: all ease-in-out 500ms;
}

然后在JS：

if ($(this).scrollTop() > 200) {
    $('#header').addClass('active');
} else {
    $('#header').removeClass('active');
}

这显然会将水箱向下推，如果你只想匹配，将#header的背景颜色设置为background: aqua而不是none就像我已经完成的那样工作：https://jsfiddle.net/f7Lnthm1/6/我还从margin-top内的ul移除了#header，以便aqua与红色对接。

如果您希望它位于水箱的顶部，那么您需要将#header的位置设置为absolute：https://jsfiddle.net/f7Lnthm1/5/

基于div id

1 个答案: