滾動時導航改爲`position：fixed` X數量

我試圖讓導航在黑色標題下方變爲position: fixed。我非常確定JavaScript需要一些調整，但我不確定此時應該做什麼。滾動時導航改爲`position：fixed` X數量

HTML

<div> 
    <header></header> 
    <div></div> 
    <div></div> 
    <ul id="site-navigation"> 
     <li>nav 1</li> 
     <li>nav 2</li> 
     <li>nav 3</li> 
     <li>nav 4</li> 
    </ul> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

CSS

div { 
    height: 100px 
} 
header { 
    background: #000; 
    height: 60px;  
    position: fixed; 
    top: 0; 
    width: 100%; 
} 
#site-navigation { 
    background: yellow; 
} 
#site-navigation li { 
    display: inline-block; 
} 
#site-navigation.fix-nav { 
    position: fixed; 
    top: 60px; 
    width: 100%; 
}

// Fixed nav 
var nav = $("#site-navigation"); 

nav.on("scroll", function(e) { 

    if (this.scrollTop > 60) { 
    nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    } 

});

來源

2014-12-03 J82

你接近，但有幾個問題。

首先，您不希望將滾動事件綁定到導航，因爲導航不在滾動;窗戶是。所以你需要將滾動事件綁定到窗口。然後，你需要檢查使用$(window).scrollTop()（或$(this).scrollTop()滾動事件中）窗口的滾動位置

$(window).on("scroll", function(e) { 
    if ($(this).scrollTop() > 60) { 
    nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    } 
});

在此進行這些更改的結果：http://jsfiddle.net/kgnkxemd/3/

來源

2014-12-03 05:53:03

什麼是'60'在JS代表什麼？這是窗口必須滾動的總像素量嗎？如果是這樣，爲什麼它跳到[這裏]（http://jsfiddle.net/kgnkxemd/7/）？但是，當我將它更改爲'45'時，它的效果就好像[here]（http://jsfiddle.net/kgnkxemd/6/）。 – J82 2014-12-03 06:04:45

是的，60代表屏幕上方60個像素。它在45中效果更好的原因是因爲你希望它在碰到黑色條時變得固定。所以這個數字需要是黑色欄底部和黃色導航欄頂部之間的距離。其中，如果你測量它，是40px。 – 2014-12-03 06:21:16

剛剛發現自己正確，因爲你發佈它:)謝謝你對此的幫助。 – J82 2014-12-03 06:22:17

scrolltop()是一個函數不是屬性。像下面一樣更新您的腳本。

jQuery(document).ready(function($){ 
var nav = $("#site-navigation"); 
    $(document).on("scroll", function(e) { 
    if ($(document).scrollTop() > 60) { 
     nav.addClass("fix-nav"); 
    } else { 
    nav.removeClass("fix-nav"); 
    }  
    });  
});

DEMO

來源

2014-12-03 05:59:43

滾動時導航改爲`position：fixed` X數量

回答

相關問題