jQuery - DIV 以滚动方式移动并将位置固定到窗口的顶部和底部

Question

可能已经有一个 jQuery 插件可以实现这一点，但我找不到一个完全符合我要求的插件。 如果有，请指点我的教程，谢谢。

我的问题是我有很长的页面内容，当你滚动到页面底部附近时，我的侧边栏不可见。

所以我想让我的 #sidebar div 在你上下滚动页面时粘在浏览器窗口的顶部和底部。

我的侧边栏高度比你的典型屏幕分辨率长，所以我需要侧边栏的底部粘在浏览器窗口的底部以及浏览器的顶部。

所以当你开始向下滚动时，侧边栏会像往常一样滚动，但是当你到达侧边栏的末端时，它会粘住并且不会滚动，当你开始向上滚动时，侧边栏会跟随直到侧边栏的顶部到达浏览器，然后它坚持。 反之亦然。

这可能吗？

我创建了一个简单的设计布局的jsfiddle ，这是中心。 我在侧边栏添加了一个虚线边框，这样你现在侧边栏应该粘在哪里。

http://jsfiddle.net/motocomdigital/7ey9g/5/

任何建议，或者您知道在线教程或演示，都会非常棒！

---

更新

请参阅@Darek Rossman 的此尝试

http://jsfiddle.net/dKDJz/4/

他已经有了基本的想法。 但是向上滚动，导致它捕捉到顶部。 我需要侧边栏随着向上/向下滚动运动而流畅。 但坚持窗口的顶部或底部。 当页眉/页脚在视口中时，它也不应该被固定定位，因此它不会覆盖。

谢谢

Answer 1

请看这里的小提琴： http ： //jsfiddle.net/dKDJz/2/

基本上，您只需观察滚动事件，一旦窗口的滚动偏移量大于侧边栏的顶部，它就会向侧边栏添加一个固定的类，并在向上滚动时删除。

这是根据CSS-Tricks发布的解决方案改编的

Answer 2

我已经用我的解决方案更新了 jsfiddle。

 var $sidebar = $("#sidebar"), $window = $(window), sidebartop = $("#sidebar").position().top; $window.scroll(function() { if ($window.height() > $sidebar.height()) { $sidebar.removeClass('fixedBtm'); if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) { $sidebar.addClass('fixedTop'); } else { $sidebar.removeClass('fixedTop'); } } else { $sidebar.removeClass('fixedTop'); if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) { $sidebar.addClass('fixedBtm'); } if ($sidebar.offset().top < 0) { $sidebar.removeClass('fixedBtm'); } } });

 h1, h2 { display: block; font-weight: bold; } #horizon { width: 100%; height: 100%; min-height: 100%; background: #cccccc; overflow: hidden; } #header, #footer { width: 480px; height: auto; overflow: hidden; background: teal; padding: 10px; color: #ffffff; } #wrapper { width: 500px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; } #content-wrapper { width: 100%; height: auto; overflow: hidden: } #content { width: 330px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; float: left; padding: 10px; } #sidebar { width: 130px; height: auto; overflow: hidden; background: #ffffff; margin: 0 auto; float: left; clear: right; padding: 8px; background: #e5e5e5; border: 2px dashed red; } .fixedBtm { margin-left: 350px !important; position: fixed; bottom: 0; } .fixedTop { margin-left: 350px !important; position: fixed; top: 0; } .post { margin: 5px; width: 320px; background: red; float: none; overflow: hidden; min-height: 175px } .buttons li { margin: 5px; width: 120px; background: blue; float: none; overflow: hidden; min-height: 20px; text-align: center; color: #ffffff; cursor: pointer; } .buttons li:hover { background: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="horizon"> <div id="wrapper"> <div id="header">header</div> <div id="content-wrapper"> <div id="content"> <h1>Latest Posts</h1> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> <div class="post">This is a post</div> </div> <div id="sidebar"> <h2>Sidebar</h2> <ul class="buttons"> <li>Button 1</li> <li>Button 2</li> <li>Button 3</li> <li>Button 4</li> <li>Button 5</li> <li>Button 6</li> <li>Button 7</li> <li>Button 8</li> <li>Button 9</li> <li>Button 10</li> <li>Button 11</li> <li>Button 12</li> <li>Button 13</li> <li>Button 14</li> <li>Button 15</li> <li>Button 16</li> <li>Button 17</li> <li>Button 18</li> </ul> </div> </div> <div id="footer">footer</div> </div> </div>

当窗口大于侧边栏时，侧边栏应保持在顶部，当侧边栏较大时，侧边栏应固定在底部。

Answer 3

为此，您不需要任何 jQuery 或 javascript。 所有这些都可以在 CSS 中通过position: fixed 。

将侧边栏选择器更改为以下内容

#sidebar {
    width: 130px;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin: 0 auto;
    clear: right;
    padding: 8px;
    background: #e5e5e5;
    border: 2px dashed red;
    position: fixed;
    right: 35px;
}

Answer 4

这可能会有所帮助

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://designwoop.com/2011/09/tutorial-creating-a-sticky-sidebar-using-jquery/

Answer 5

我玩过Derek正在做的事情，我已经完成了你最初要求的顶部和底部。

我根据自己的需要编辑了一些css，我相信你可以把旧东西放在那里并复制脚本。

http://jsfiddle.net/mLdnb/3/

/ * NewEdit * /

我用你所拥有的东西取代了我所做的。 我想出了这个：
http://jsfiddle.net/stillb4llin/dKDJz/47/

/ * EndEdit * /

Answer 6

不幸的是我没有足够的代表来简单地评论这个链接，所以在这里你去：

http://www.derekallard.com/blog/post/conditionally-sticky-sidebar

它已经有几年了，但根据屏幕截图显示，它似乎完全覆盖了您的需求。

Answer 7

试试这里http://jsfiddle.net/dKDJz/8/

我删除了相当多的代码。

我所做的是当你向下滚动它到达侧边栏的顶部时，它会粘在窗户的顶部。 一旦你滚动回到顶部，无论标题有多高，它都会在符合标题时解开。