[英]Fix navigation position when scrolling
當導航位置和滾動位置相等時,我想將導航位置固定在頂部。
請讓我知道如何獲取導航位置和頁面滾動位置? 我想要這樣的東西: http : //new.livestream.com/live-video-tools
我試過了:
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#main-heading').offset().top;
// our function that decides weather the navigation bar should have "fixed" cs s position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if(scroll_top > sticky_navigation_offset_top) {
$('#fixed_nav').css({ 'position': 'fixed', 'top':6, 'left':0, 'width':'100%', 'z-index':999, 'height':80, 'background':'#fff' });
} else {
$('#fixed_nav').css({ 'position': '','overflow': 'visible', 'display':'block','height':80});
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
這很古老,但是應該為Google員工的利益提供答案。
$(function () {
var offset = $('#nav').offset().top;
var nav = function () {
var scroll = $(window).scrollTop();
if (scroll < offset) {
$('#nav').css({ 'position': 'relative' });
}
else {
$('#nav').css({ 'position': 'fixed', 'top': 0 });
}
};
nav();
$(window).scroll(function () {
nav(); //this ensures we check again every time the user scrolls
});
});
OP-您可能現在已經知道了,但是我不確定為什么要檢查#main-heading
的偏移量,然后設置另一個#fixed-nav
,這可能就是您所要解決的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.