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

Question

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

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

帮助表示赞赏！

看看这个网站我正在寻找什么 - http://9gag.com/

score 2 · Accepted Answer

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;}只需通过从您的站点中删除该行再次将 netbar 设置为绝对

或者，如果您愿意为了减少故障而牺牲吸盘的位置，请改用以下代码：

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

enjin-bar 不是 netbar 的一部分，这就是滚动时它不跟随 netbar 的主要原因，因此绕过它的最简单方法是使用 jQuery

现场演示| 演示源

编辑2：

将粘贴中的代码替换为以下代码：

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

score 0 · Accepted Answer

0

尝试添加这个：

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

于 2013-01-12T22:27:06.213 回答

score 0 · Accepted Answer

0

div#netbar
{
    position:fixed;
}

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

于 2013-01-12T22:42:26.730 回答

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

3 回答 3

Related

Reference