jQuery - DIV 以滚动方式移动并将位置固定到窗口的顶部和底部 [英] jQuery - DIV to move with scrolling motion and stick position to top and bottom of window

问题描述

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

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

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

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

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

这可能吗?

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

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

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

---

更新

请参阅@Darek Rossman 的此尝试

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

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

谢谢

解决方案

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

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

h1, h2 {显示:块；字体粗细:粗体；}#地平线{宽度:100%；高度:100%；最小高度:100%；背景:#cccccc；溢出:隐藏；}#页眉页脚 {宽度:480px；高度:自动；溢出:隐藏；背景:青色；填充:10px；颜色:#ffffff；}#包装{宽度:500px；高度:自动；溢出:隐藏；背景:#ffffff；边距:0 自动；}#content-wrapper {宽度:100%；高度:自动；溢出:隐藏:}#内容 {宽度:330px；高度:自动；溢出:隐藏；背景:#ffffff；边距:0 自动；向左飘浮;填充:10px；}#侧边栏{宽度:130px；高度:自动；溢出:隐藏；背景:#ffffff；边距:0 自动；向左飘浮;清楚:对；填充:8px；背景:#e5e5e5；边框:2px 红色虚线；}.fixedBtm {margin-left: 350px !important;位置:固定；底部:0；}.fixedTop {margin-left: 350px !important;位置:固定；顶部:0；}.邮政 {边距:5px；宽度:320px；背景:红色；浮动:无；溢出:隐藏；最小高度:175px}.buttons li {边距:5px；宽度:120px；背景:蓝色；浮动:无；溢出:隐藏；最小高度:20px；文本对齐:居中；颜色:#ffffff；光标:指针；}.buttons li:hover {背景:浅蓝色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="地平线"><div id="包装器"><div id="header">header</div><div id="内容包装器"><div id="内容"><h1>最新帖子</h1><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div><div class="post">这是一个帖子</div>

<div id="侧边栏"><h2>侧边栏</h2><ul class="buttons"><li>按钮 1</li><li>按钮 2</li><li>按钮 3</li><li>按钮 4</li><li>按钮 5</li><li>按钮 6</li><li>按钮 7</li><li>按钮 8</li><li>按钮 9</li><li>按钮 10</li><li>按钮 11</li><li>按钮 12</li><li>按钮 13</li><li>按钮 14</li><li>按钮 15</li><li>按钮 16</li><li>按钮 17</li><li>按钮 18</li>

<div id="footer">footer</div>