基於div id的多個jQuery函數

我有一個導航功能，有兩個部分，第一個功能不工作，但第二個。基於div id的多個jQuery函數

如果你向下滾動，你會看到導航淡入滾動..我試圖做到的是具有相同的鏈接顯示沒有背景顏色，然後當你向下滾動滾動鏈接與網站相同，然後相同的鏈接淡入黑色的導航欄。

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

來源

2017-01-27 Codi

你的意思是這樣的？ 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/我也從ul insid中刪除了margin-top e #header所以水屁股對着紅色。

如果你想讓它坐在淺綠色盒子的頂部，那麼你將要設置的#header到absolute位置：這正是我試圖完成https://jsfiddle.net/f7Lnthm1/5/

來源

2017-01-27 05:24:17 Maverick

..唯一的問題是它看起來像推動綠色框.. – Codi

@科迪我已編輯，解釋並添加到兩個更多的js小提琴的鏈接，讓你看看:)。 – Maverick

非常感謝Maverick ..這讓我一整天都難倒。 – Codi

基於div id的多個jQuery函數

回答

相關問題