如何停止页面底部的动画滚动条
How to stop an animated scrollbar at the bottom of the page?
我已经很好地编写了一个动画效果很好的滚动条，但当它到达页面的页脚（底部）时，它不会停止。
此处提供演示。
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
}); * { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 600px; margin: 15px auto; }
p { margin: 0 0 15px 0; }
p:first-child { background: #fffcde; padding: 10px; }
#sidebar ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#main { width: 390px; float: left; }
#sidebar { width: 190px; float: right; }
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/**
* For IE 6/7 (trigger hasLayout)
*/
.cf {
*zoom:1;
}
footer{
text-align: center;
height:30px;
padding-top: 30px;
width: 100%;
background-color:#eeeeee;
}<div id="page-wrap" class="cf">
<div id="title-area">
<h1>ДЕМО</h1>
<p> </p>
</div>
<div id="main">
<p>ПРОКРУЧИВАЙТЕ СТРАНИЦУ ВНИЗ!</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="sidebar">
<ul>
<li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li>
<li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li> <li><a href="index.html">ДЕМО 1</a></li>
<li><a href="css.html">ДЕМО 2</a></li>
<li><a href="reveal.html">ДЕМО 3</a></li>
</ul>
</div>
</div>
<footer>
THIS IS FOOTER!!!
</footer>Jsfidlehttp://jsfiddle.net/my8swy0u/1/
只要添加一个条件，在函数接近尾声时停止函数的其余部分。
$(function () {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() - 800) return;
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
相关文章：
- jQuery Lazy加载动画滚动
- CSS-若窗口太小，滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏）浏览器滚动条
- 只在滚动时播放循环css动画-滚动停止时停止
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时，在隐藏滚动条和隐藏溢出的同时触发事件
- 当滚动条到达容器底部时设置动画
- 没有水平滚动条的 Jquery 图像动画
- 使微小的滚动条与不断变化的动画内容一起工作
- 浏览器滚动条动画性能
- 滚动条的阴影出现在顶部的叠加动画在Chrome和Safari
- 动画滚动条
- 最简单的方法，使滚动条滚动与jquery动画
- 使用自定义滚动条滚动部分(漂亮的滚动）-快速滚动时的动画急动
- 如何停止页面底部的动画滚动条
