滾動時需要保持頂部條碼的代碼

Question

我有一個HTML和CSS欄，它被添加到站點的頂部，並且需要一些代碼在滾動時保持頂部。

我會優先使用JavaScript，或任何可行的，我只需要一些東西，以保持在頂部。

幫助表示讚賞！

看看這個網站什麼我要找 - http://9gag.com/

Answer 1

9gag.com也使用position:fixed;的頭，但在你的情況下，它使這position:fixed !important是解決方案，因爲它覆蓋下面你已經把在那裏您的網站上它（在頂部）。

CSS：

#netbar{position:fixed !important;} 

Live demo | Demo source

編輯：

實現這一目標而無需犧牲口魚位置，最簡單的方法是使用jQuery，因爲你提到

$(document).ready(function() { 
    $(window).scroll(function() { 
    $("#enjin-bar").css({ 
     "top": Math.max($('body').scrollTop(), $('html').scrollTop()) + 4 
    }); 
    $("#netbar").css({ 
     "top": Math.max($('body').scrollTop(), $('html').scrollTop()) 
    }); 
    }); 
}); 

Live demo | Demo source

它的工作原理，但它是令人難以置信的毛病;剛剛成立網吧絕對再次通過從網站中刪除#netbar{position:fixed !important;}線

或者，如果你願意犧牲suckereye的位置有點少出問題的煩躁，使用此代碼來代替：

$(document).ready(function() { 
    $(window).scroll(function() { 
    $("#enjin-bar").css({ 
     "top": Math.max($('body').scrollTop(), $('html').scrollTop()) + 4 
    }); 
    }); 
}); 

的enjin-bar不是netbar的一部分，這就是爲什麼當你滾動時它不會跟着netbar的主要原因，所以最簡單的方法是使用jQuery

Live demo | Demo source

EDIT2：

替換從pastie的代碼下面的一個：

<div id="netbar"> 
    <div id="discover" role="directory"> 
     <ul> 
    <li class="suckerfish"> 
     <span class="sitelogo">LinkyCraft</span> 
     <ul class="section-drop"> 
      <li class="link-two"><a href="http://www.linkycraft.net/servers">Server Status</a></li> 
      <li class="link-three"><a href="http://www.linkycraft.net/home">Survival Home</a> 
      <li class="link-five"><a href="http://www.monlotron.enjin.com/">Our Designer</a> 
</li> 
     </ul> 
    </li> 
</ul> 
    </div> 
</div> 

<style> 

div#netbar a { 
    color: #DEE3E6; 
} 
div#netbar a:hover { 
    color: #FFFFFF; 
} 
div#netbar li { 
    float: left; 
    margin: 0; 
    position: relative; 
} 
div#netbar > a { 
    border-right: 1px solid #333333; 
    display: block; 
    float: left; 
    line-height: 29px; 
    padding: 0 10px; 
} 
div#netbar > a:hover { 
    background: none repeat scroll 0 0 #222222; 
} 
div#netbar .suckerfish { 
    z-index: 9998; 
} 
div#netbar .suckerfish > .section-drop { 
    background-color: #222222; 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
    border-top: medium none; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); 
    position: absolute; 
    z-index: 2; 
    float: left; 
} 
div#netbar .suckerfish > a, div#netbar .suckerfish > span { 
    display: block; 
    font-size: 12px; 
    line-height: 12px; 
    padding: 8px 16px 9px 10px; 
    white-space: nowrap; 
} 
div#netbar .suckerfish ul li { 
    float: none !important; 
    margin: 0; 
    width: auto; 
} 
div#netbar .suckerfish:hover { 
    background-color: #222222; 
} 

.suckerfish .section-drop{ 
    left: -9999px; 
} 


div#netbar { 
    border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    -webkit-border-radius: 0 0 3px 3px; 
    background:-moz-linear-gradient(top,#4d4d4d 0,#343434 100%); 
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4d4d4d),color-stop(100%,#343434)); 
    background:-webkit-linear-gradient(top,#4d4d4d 0,#343434 100%); 
    background:-o-linear-gradient(top,#4d4d4d 0,#343434 100%); 
    background:-ms-linear-gradient(top,#4d4d4d 0,#343434 100%); 
    background:linear-gradient(top,#4d4d4d 0,#343434 100%); 
    -moz-box-shadow:inset 0 0 1px #666,1px 1px 2px rgba(0,0,0,.65); 
    -webkit-box-shadow:inset 0 0 1px #666,1px 1px 2px rgba(0,0,0,.65); 
    box-shadow:inset 0 0 1px #666,1px 1px 2px rgba(0,0,0,.65); 
    color:#dee3e6; 
    height:28px; 
    padding:0; 
    position:absolute; 
    width:4000px; 
    left:-1460px; 
    top: 0; 
    z-index:4; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100.01%; 
    font-family: inherit; 
    vertical-align: baseline; 
    outline: 0; 
} 


div#netbar li.suckerfish { 
    position: relative; 
    left: 1460px; 
} 

#enjin-bar {margin-left: 175px;} 

div#netbar .sitelogo { 
    background: url("http://files.enjin.com/93809/LinkyCraft/Images/Headers/Netbar.png") no-repeat scroll 6px 1px transparent; 
    text-indent: -9999px; 
    width: 150px; 
} 

#enjin-bar { 
z-index: 25; 
} 

div#enjin-bar > div.left > a:first-child { 
display: none; 
} 

#netbar li { 
    list-style: none outside none; 
} 
div#netbar a { 
    color: #DEE3E6; 
} 

div#netbar .suckerfish { 
    z-index: 9998; 
} 
div#netbar .suckerfish ul li { 
    float: none !important; 
    margin: 0; 
    width: auto; 
} 
div#netbar .suckerfish:hover { 
    background-color: #222222; 
} 
div#netbar .suckerfish > ul li a { 
    display: block; 
    font-size: 12px; 
    line-height: 12px; 
    padding: 6px 12px; 
    white-space: nowrap; 
} 
div#netbar .suckerfish > ul li a:hover { 
    background-color: #111111; 
} 
div#netbar .suckerfish > ul li:last-child a { 
    border-bottom-left-radius: 6px; 
    border-bottom-right-radius: 6px; 
} 
div#netbar .suckerfish > span:after, div#netbar .suckerfish > a:after { 
    border-color: Silver transparent transparent; 
    border-right: 3px dashed transparent; 
    border-style: solid dashed dashed; 
    border-width: 3px 3px 0; 
    content: ""; 
    display: block; 
    height: 0; 
    line-height: 0; 
    padding-top: 1px; 
    position: absolute; 
    right: 6px; 
    top: 13px; 
    width: 0; 
} 

div#netbar div#discover { 
    float: left; 
    height: 28px; 
} 
div#netbar div#discover ul > li { 
    float: left; 
    height: 28px; 
    line-height: 28px; 
    position: relative; 
} 
div#netbar div.help-links { 
    border-right: 1px solid #333333; 
    float: left; 
} 
div#netbar div#discover ul li span { 
    border-right: 1px solid #333333; 
} 
div#netbar div#discover ul li span:hover { 
    color: #FFFFFF; 
    cursor: default; 
} 
div#netbar div#discover li.suckerfish ul { 
    top: 27px; 
    width: 200px; 
    padding-left: 0; 
} 
div#netbar div#discover li.suckerfish ul li a { 
    background-position: left center; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
} 


.suckerfish:hover .section-drop{ 
    left: 0px; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(window).scroll(function() { 
    $("#enjin-bar").css({ 
     "top": Math.max($('body').scrollTop(), $('html').scrollTop()) + 4 
    }); 
    $("#netbar").css({ 
     "top": Math.max($('body').scrollTop(), $('html').scrollTop()) 
    }); 
    }); 
}); 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-37359442-1']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 





</script> 

Answer 2

嘗試添加此：

div#netbar { position: fixed; top: 0; } 

Answer 3

​​

設置位置的財產作爲固定可以解決您的問題！