我知道这是一个较老的帖子，但我认为在这个网站上已经可以找到Jiew孟试图做的一个很好的例子。查看位于这里的侧菜单:https://stackoverflow.com/faq#questions。在不深入研究它的情况下，我可以告诉javascript，一旦滚动到达锚标记以下，就会附加一个固定的位置，如果滚动到同一锚标记以上，就会删除固定的位置。希望这能让一些人从正确的方向开始。

我知道这是一个较老的帖子，但我认为在这个网站上已经可以找到Jiew孟试图做的一个很好的例子。查看位于这里的侧菜单:https://stackoverflow.com/faq#questions。在不深入研究它的情况下，我可以告诉javascript，一旦滚动到达锚标记以下，就会附加一个固定的位置，如果滚动到同一锚标记以上，就会删除固定的位置。希望这能让一些人从正确的方向开始。

这是一个旧的帖子，但我将留下我的javascript解决方案，以防有人需要它。

// you only need this function function sticky( _el ){ _el.parentElement.addEventListener("scroll", function(){ _el.style.transform = "translateY("+this.scrollTop+"px)"; }); } // how to make it work: // get the element you want to be sticky var el = document.querySelector("#blbl > div"); // give the element as argument, done. sticky(el); #blbl{ position:relative; height:200px; overflow: auto; background: #eee; } #blbl > div{ position:absolute; padding:50px; top:10px; left:10px; background: #f00 } <div id="blbl" > <div><!-- sticky div --></div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </div>

笔记

我使用transform: translateY(@px)，因为它应该是轻量级的计算，高性能的动画 我只在现代浏览器中尝试了这个功能，它不适用于需要供应商的旧浏览器(当然还有IE)

首先，设置位置:固定和左侧:50%，其次-现在你的起点是一个中心，你可以设置新的位置与边缘。

这个解决方案对我很有效!参考原文的详细答案:https://stackoverflow.com/a/11833892/5385623

.level1 { 位置:相对; ｝ .level2 { 位置:绝对的; ｝ .level3 { 位置:固定; /*不要设置顶部/左侧!* / ｝ < div class = '使' > < div class =“二级”> < div class = ' level3 ' > 内容 < / div > < / div > < / div >

下面是Jon Adams上面建议的一个例子，使用jQuery将div(工具栏)固定到页面元素的右侧。其思想是找到从视口的右侧到页面元素的右侧的距离，并保持工具栏的右侧在那里!

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});