如何讓我的div只粘在大中屏幕上？

Question

<div class="navigation small-only-text-left large-text-center"> 
    <a class="button tiny" href="#">Home</a> 
    <a class="button tiny" href="portfolio.html">Portfolio</a> 
    <a class="button tiny" href="#">About us</a> 
    <a class="button tiny" href="#">Contact</a> 
</div> 

這是我在我的頁面中使用的代碼。我想要一些Jquery，當它碰到頂部時會使div變粘，但只會在中等屏幕上粘起來。謝謝！

Answer 1

如果窗口寬度大於Ñ像素（Ñ是最小的寬度）可以使用.resize()功能和測試。

在我的例子中，我使用了600像素作爲最小的中等屏幕寬度。爲了讓導航欄粘貼到大中型窗口的頂部，它需要固定的位置和0的值。當然，該功能必須在頁面加載和窗口大小調整時執行。

function adjustScreen(){ 
    var windowWidth = $(window).width(); 

    if (windowWidth > 600) { 
     $('.navigation').css("position", "fixed"); 
     $('.navigation').css("top", 0); 
    } else { 
     $('.navigation').css("position", "static"); 
    } 
} 

// on load 
$(function(){ 
    adjustScreen(); 
}); 

// on resize 
$(window).resize(function(){ 
    adjustScreen(); 
}); 

它也更容易使用CSS媒體查詢。只需給導航欄提供上述屬性和值，然後在查詢中將其位置更改爲static。

.navigation { 
    position: fixed; 
    top: 0; 
} 
@media screen and (max-width: 600px) { 
    .navigation { 
     position: static; 
    }  
}