Javascript 有没有一种方法可以在我的网站上创建一个向下滚动时在顶部跟随的div？

我正试图复制这一点：（顶部有选项卡的一个：|排版|代码表|表单|按钮|逐个图标|）。我想复制同样的快速效果

我想让这个部门也这样做：

#panel {
    margin: auto;
    border-bottom: 1px solid rgba(0,0,0,.6);
    border-top: 0;
    box-shadow: 0 1px rgba(0,0,0,.1),
    1px 0 rgba(0,0,0,.1),
    -1px 0 rgba(0,0,0,.1),
    0 -1px rgb(255,255,255) inset,
    0 1px 2px rgba(0,0,0,.2) inset,
    1px 0 rgb(255,255,255) inset,
    -1px 0 rgb(255,255,255) inset;
    background: #E8E8E8;    
    width: 75%;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    color: rgba(0,0,0,.7);
    text-shadow: 0 1px white;
    padding: 2px 0px 2px 8px;
    margin-top: -149px;
    text-align: left;
    font-size: 11px;
}

在我的网站上：

---

谢谢：）

我在这里创建了JSFIDLE：

因此，您需要在css规则中添加一个类，以使div在窗口顶部保持静态：

.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

然后，添加jQuery函数来绑定scroll事件，并在到达所需位置时添加固定类：

<script type="text/javascript">
    var $mydiv = $("#mydiv"),
        origTop = $("#mydiv").position().top;

    $(window).scroll(function(e) {
        if( document.body.scrollTop > origTop) {
            console.log($mydiv.hasClass('fixed'));
            $mydiv.addClass("fixed");
        }
        else {
            console.log('c ' + (document.body.scrollTop > origTop));
            $mydiv.removeClass("fixed");
        }
    });
</script>

变量$mydiv=$（“#mydiv”），
origTop=$（“#mydiv”）.position（）.top；
$（窗口）。滚动（功能（e）{
如果（document.body.scrollTop>origTop）{
log（$mydiv.hasClass（'fixed'）；
$mydiv.addClass（“固定”）；
}
否则{
log（'c'+（document.body.scrollTop>origTop））；
$mydiv.removeClass（“固定”）；
}
});

引导程序网站向您解释

如果您使用的是引导，则可以使用CSS类

navbar fixed top

来获得此行为：

...

如果您想让导航栏在滚动浏览之后变得固定，那么需要使用一些JavaScript动态添加类

navbar fixed top

（取自）

假设您有一些HTML

…

还有一些CSS

.navbar固定顶{
位置：固定；
排名：0；
左：0；
}

然后，下面的JS将为您提供所请求的行为

var docked=false；
var menu=document.getElementById（'panel'）；
var init=menu.offsetTop；
函数scrollTop（）{
返回document.body.scrollTop | | document.documentElement.scrollTop；
}
window.onscroll=函数（）{
如果（！docked&&（menu.offsetTop-scrollTop（）<0））{
menu.style.top=0；
menu.className='navbar fixed top'；
停靠=正确；
}else if（docked&&scrollTop（）如果您使用jQuery，请尝试。基本用法是：

$(document).ready(function() {
    $('#panel').scrollToFixed();
});

…但是，请参见链接以获取选项（例如，当用户向下滚动时允许页脚面板等）。
我已经尝试复制代码并将其更改为div，但没有任何效果。此外，我使用prototypejs作为主库。我知道更改jQuery的$可以使其工作，但在我的情况下，它不工作。我将尝试更改“#mydiv”与#panel。我希望它能工作：）另外，我正在使用另一个库。你知道如何使代码不受干扰吗？我认为它类似于“jQuery.noConflict（）；jQuery（document）.ready（函数（$）"但是我不知道该放在哪里。对不起，兄弟。除非你告诉我你在使用哪个库，否则我帮不了你。jQuery可以在无冲突模式下使用PrototypeJS是我的论坛脚本使用的库，我将尝试为jQuery更改每一个美元。这应该行。顺便说一句，如果你不知道如何在无冲突模式下使用jQueryl已经知道了。如果仍然不起作用，请尝试在任何其他自定义脚本之前添加
jQuery.noConflict（）；
，即使您没有对jQuery使用
$
。noConflict（）方法将重写以前声明的其他
$
函数，以不影响原型。我不需要像我给出的示例那样展开，我刚刚发现，我将尝试您的代码并返回给您。谢谢发布。不起作用：（多么奇怪，也许我发布的#面板的css在某种程度上干扰了你？如果你清楚的话，我不确定你必须在css中添加一个类
。navbar fixed top{position:fixed；top:0；left:0；}
。什么是“跟随滚动条”是什么意思？你在用哪个浏览器？我刚刚看到，它在IE.chrome/ff/opera最新版本中不工作，因为我运行的是LinuxMint。