如何製作曾經滾動到的導航欄，並粘貼到CSS中的屏幕頂部？

-2

您聽過標題。我正在www.thundergamingforums.com的網頁上工作，我似乎無法找到如何做到這一點。請用CSS/HTML解釋，但是如果您需要完全用任何語言重寫代碼。如何製作曾經滾動到的導航欄，並粘貼到CSS中的屏幕頂部？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#navbarc {} 
 

 
#navbarc ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222; 
 
} 
 

 
#navbarc li { 
 
    float: left; 
 
} 
 

 
#navbarc li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
#navbarc li a:hover:not(.active) { 
 
    background-color: #111; 
 
    transition: color .1s; 
 
    color: #00a6ff; 
 
} 
 

 
#navbarc .active { 
 
    background-color: #00a6ff; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="navbarc"> 
 
<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#about">Forums</a></li> 
 
    <li><a href="https://www.youtube.com/channel/UCUKBcVKyI6rpgBFu9Zp5_ZA">Youtube</a></li> 
 
    <li><a href="http://steamcommunity.com/groups/officialthundergaming">Steam Group</a></li> 
 

 
</ul> 
 
</div> 
 
</body> 
 
</html>

來源

2017-07-31 Joe Thompson

重複的https://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll – Vandesh

使用HTML/CSS，你可以使用position: sticky但值得注意的是有限的瀏覽器支持http://caniuse.com/css-sticky/embed/

body { 
 
    padding-top: 100px; 
 
    height: 300vh; 
 
} 
 

 
#navbarc { 
 
    position: sticky; 
 
    top: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    #navbarc { 
 
    } 
 
    
 
    #navbarc ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #222; 
 
    } 
 
    
 
    #navbarc li { 
 
     float: left; 
 
    } 
 
    
 
    #navbarc li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    
 
    #navbarc li a:hover:not(.active) { 
 
     background-color: #111; 
 
     transition: color .1s; 
 
     color: #00a6ff; 
 
    } 
 
    
 
    #navbarc .active { 
 
     background-color: #00a6ff; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="navbarc"> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a></li> 
 
     <li><a href="#about">Forums</a></li> 
 
     <li><a href="https://www.youtube.com/channel/UCUKBcVKyI6rpgBFu9Zp5_ZA">Youtube</a></li> 
 
     <li><a href="http://steamcommunity.com/groups/officialthundergaming">Steam Group</a></li> 
 

 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-31 18:39:06

如果我是正確的你想要將您的導航欄粘貼到觸摸屏幕頂部時屏幕頂部。

在scrollTop方法的幫助下，您可能需要使用jQuery。

<script> 
var stickyNavTop = $('#navbarc').offset().top; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > stickyNavTop) { 
     $('#navbarc').addClass('fixed'); 
    } 
    else { 
     $('#navbarc').removeClass('fixed'); 
    } 
}); 
</script>

來源

2017-07-31 18:45:15

是的，我使用名爲「Zyro」的網頁構建器，顯然這兩個選項 –

都不起作用.... –

如何製作曾經滾動到的導航欄，並粘貼到CSS中的屏幕頂部？

回答

相關問題