jQuery-DIV可以滚动移动,并将位置粘贴到窗口的顶部和底部
jQuery - DIV to move with scrolling motion and stick position to top and bottom of window
可能已经有一个jQuery插件可以实现这一点,但我找不到一个插件来做我想要做的事情。如果有的话,请给我指一下教程,谢谢。
我的问题是,我有很长的页面内容,当你滚动到页面底部附近时,我的侧边栏是不可见的。
因此,我想让我的#sidebarddiv在页面上下滚动时始终位于浏览器窗口的顶部和底部。
我的侧边栏高度比你通常的屏幕分辨率长,所以我需要侧边栏的底部粘在浏览器窗口的底部和浏览器的顶部。
因此,当你开始向下滚动时,侧栏会像正常情况一样滚动,但当你到达侧边栏的末尾时,它会粘住,不会滚动,当你继续向上滚动时,边栏会一直跟着,直到侧边栏的顶部到达浏览器,然后粘住。反之亦然
这可能吗?
我创建了一个简单设计布局的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() {
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>
当窗口大于侧边栏时,侧边栏应保持在顶部,当侧边栏较大时,应固定在底部。
您不需要任何jQuery或javascript。所有这些都可以用position: fixed
在CSS中实现。
将侧边栏选择器更改为以下
#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;
}
- 使用jQuery滚动获取距窗口顶部的距离
- 如何在用户使用javascript向下滚动时创建一个附加到浏览器窗口顶部的层
- 在顶部框架上显示模态弹出窗口
- Chrome扩展-在全屏视频顶部显示自定义通知/弹出窗口(HTML元素)
- Javascript 将 iPython 笔记本单元格滚动到窗口顶部
- 在浏览器窗口顶部的HTC Android(4.0.3)上为空(空白)
- 如何相对于窗口顶部定位弹出窗口
- jQuery Waypoints只在元素到达窗口顶部时触发
- offset().顶部相对于窗口顶部的偏移量
- 当元素位于窗口顶部400像素以内时,使用jQuery函数
- 窗口顶部的Javascript事件进入和离开
- 在窗口顶部单击显示消息,而无需向上滚动到顶部
- 如何找到窗口顶部位置和我的iframe开始位置之间的距离
- 有没有办法让第二张幻灯片从循环2的窗口顶部开始?
- 修复滚动时浏览器窗口顶部的对象
- Reveal.js.如何暂时禁用显示属性,以便我可以添加其他东西,例如在窗口顶部的telestration
- 单击时从窗口顶部滚动到特定位置
- 仅当其顶部到达窗口顶部时才修复标题
- 假位置固定在Div内,但相对于窗口顶部,而滚动
- 当滚动到窗口顶部时,加载结果jQuery