滚动时需要保持栏顶部的代码

时间：2013-01-12 22:25:31

标签： html

我有一个HTML和CSS栏，它被添加到网站的顶部，需要一些代码才能在向下滚动时将其保持在顶部。

我最好使用JavaScript，或任何有效的东西，我只需要一些东西将它保持在最顶层。

感谢帮助！

查看此网站，了解我所寻找的内容 - http://9gag.com/

3 个答案:

答案 0 :(得分：2)

9gag.com也使用position:fixed;作为标题，但在您的情况下，它正在使position:fixed !important成为解决方案，因为它已被覆盖在您将其放置在您的网站上的位置（在顶部）。

CSS：

#netbar{position:fixed !important;}

Live demo | Demo source

修改

在不牺牲suckerfish位置的情况下实现这一目标的最简单方法是使用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;}行

，然后再次将netbar设置为绝对值

或者，如果你愿意为了更少的小故障而牺牲suckereye的位置，请使用此代码：

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

enjin-bar不是网吧的一部分，这是滚动时不遵循网吧的主要原因，所以绕过这个的最简单方法是使用jQuery

Live demo | Demo source

<强> EDIT2：

将牧师的代码替换为下面的代码：

<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>

答案 1 :(得分：0)

尝试添加此内容：

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

答案 2 :(得分：0)

div#netbar
{
    position:fixed;
}

将位置的属性设置为固定可能会解决您的问题！

相关问题
最新问题