滚动后将元素粘贴到顶部

Question

我想让侧边栏中的容器/div随着页面向下滚动而移动/跟随。 它不仅仅是一个position:fixed容器。 只有当它应该消失并向下滚动时它才会移动。 实施的最佳实践是什么？

谢谢

Answer 1

假设我们想要：

1. 从顶部 260px 开始（在 CSS 中定义）
2. 停留在距离顶部24px处（如 JS 中所定义）

 var $sticky = $("#sticky"), pos = { abs: {position: "absolute", top: parseInt($sticky.css("top"), 10) }, fix: {position: "fixed", top: 24 /* <<< SET AS DESIRED */ }, }; $(window).on("load scroll", function() { var canFix = $(this).scrollTop() >= pos.abs.top - pos.fix.top; $sticky.css( pos[ canFix? "fix": "abs" ] ); });

 body{ height: 2000px; border: 4px dashed #444; } #sticky{ height: 100px; background: #0bf; position:absolute; top: 260px; /* <<< SET AS DESIRED */ }

 SCROLL. <div id="sticky">STICK ME AT 24 FROM TOP</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>