響應和粘滯導航欄

Question

我有一個固定在頁面頂部的導航欄，當寬度低於768px。

當它超過768px它開始在底部，當用戶滾動過去，它變得粘在上面。

這兩個實例都可以自行工作，但是當瀏覽器調整大小時，從768px到以上時會出現一些問題。 （從768去以下的罰款。）

當我加載在瀏覽器尺寸的頁面768px下，然後調整窗口，上面是我運行出現問題。

我希望導航欄在狀態之間平滑過渡。 （當它加載768px以上的圖片時，它可以很好地工作，然後放大到下面並在上面放大 - 理想情況下，我希望它在加載到768px以下時能夠工作。）或者，作爲替代方案，只需從下移動導航欄即可將其固定到頂部768px以上。

This is the link to the site.

這是我的CSS

.header{ 
width: 100%; 
min-width: 300px; 
height: 100px; 
padding: 0px; 
background: black; 
position: absolute; 
bottom: 0px; 
z-index: 99999; 
-webkit-font-smoothing: subpixel-antialiased; 
} 

.header.fixed{ 
width: 100%; 
position: fixed; 
top: 0px; 
height: 100px; 
-webkit-font-smoothing: subpixel-antialiased; 
} 

@media only screen and (max-width: 768px){ 
.header{ 
width: 100%; 
background: black; 
position: fixed; 
top: 0px; 
height: 100px; 
-webkit-font-smoothing: subpixel-antialiased; 
} 
} 

，這是JavaScript

<script> 

jQuery(document).ready(function() { 
    var s = jQuery(".header"); 
    var pos = s.position();      
    jQuery(window).scroll(function() { 
     var windowpos = jQuery(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      s.addClass("fixed"); 
     } else { 
      s.removeClass("fixed"); 
     } 
    }); 
}); 
</script> 

我也試過下面沒有運氣。

<script> 
if (jQuery(window).width() > 768) {  
jQuery(document).ready(function() { 
    var s = jQuery(".header"); 
    var pos = s.position();      
    jQuery(window).scroll(function() { 
     var windowpos = jQuery(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      s.addClass("fixed"); 
     } else { 
      s.removeClass("fixed"); 
     } 
    }); 
}); 
}</script> 

<script> 
jQuery(window).resize(function(){ 
if (jQuery(window).width() > 768) {  
jQuery(document).ready(function() { 
    var s = jQuery(".header"); 
    var pos = s.position();      
    jQuery(window).scroll(function() { 
     var windowpos = jQuery(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      s.addClass("fixed"); 
     } else { 
      s.removeClass("fixed"); 
     } 
    }); 
}); 
}})</script> 

Answer 1

試試這個：

function sticky_navigation() { 
    var browserWidth = $(window).width(); 
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top 

    // if we've scrolled more than the page, change its position to fixed to stick to top, 
    // otherwise change it back to relative 
    if ((scroll_top > $('.header').height()) && (browserWidth > 720)) { 
     $('.header').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' }); 
    } else { 
     $('.header').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' }); 
    } 
}; 

// and run it again every time you scroll 
$(window).scroll(function() { 
    sticky_navigation(); 
}); 

// and run every time you resize to boot 
$(window).resize(function() { 
    sticky_navigation(); 
});