我有一个HTML和CSS栏,它被添加到站点的顶部,并且需要一些代码在滚动时保持顶部。滚动时需要保持顶部条码的代码
我会优先使用JavaScript,或任何可行的,我只需要一些东西,以保持在顶部。
帮助表示赞赏!
看看这个网站什么我要找 - http://9gag.com/
我有一个HTML和CSS栏,它被添加到站点的顶部,并且需要一些代码在滚动时保持顶部。滚动时需要保持顶部条码的代码
我会优先使用JavaScript,或任何可行的,我只需要一些东西,以保持在顶部。
帮助表示赞赏!
看看这个网站什么我要找 - http://9gag.com/
9gag.com也使用position:fixed;
的头,但在你的情况下,它使这position:fixed !important
是解决方案,因为它覆盖下面你已经把在那里您的网站上它(在顶部)。
CSS:
#netbar{position:fixed !important;}
编辑:
实现这一目标而无需牺牲口鱼位置,最简单的方法是使用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())
});
});
});
它的工作原理,但它是令人难以置信的毛病;刚刚成立网吧绝对再次通过从网站中删除#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
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>
工程很棒,除了栏杆上的其他东西没有移动,LinkyCraft标志更靠左。这怎么解决? – LegacyP7
请参阅编辑方法以接近.. – extramaster
如何将此代码添加到我的代码中? – LegacyP7
设置位置的财产作为固定可以解决您的问题!
我认为你在这里有错误的想法。 看看这个网站,注意他们的酒吧在你向下滚动时如何停留在顶部。 http:// 9gag。com/ – LegacyP7
[?有什么*你*尝试(http://whathaveyoutried.com) –
一些我找到的JavaScript代码。那里没有运气。 – LegacyP7