使 html 元素在滚动过去时保持原位
Make html element stay in place when scrolled past
如何使html元素在滚动到之前不会固定?因此,当用户滚动时,它将处于正常位置,但是在用户滚动过去后它不会离开屏幕吗?
将侦听器附加到 onscroll
事件,如果scrollTop
大于元素的 Y 位置,则将其设置为 position: fixed
。
我以前用过这段代码:
http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/
(function($){
$.fn.scrollFixed = function(params){
params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
var element = $(this);
if(params.appearAfterDiv)
var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
else
var distanceTop = element.offset().top;
if(params.hideBeforeDiv)
var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
else
var bottom = 200000;
$(window).scroll(function(){
if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )
element.css({'position':'fixed', 'top':'5px'});
else
element.css({'position':'static'});
});
};
})(jQuery);
然后只需调用元素:
$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});
看看 jQuery Scrollfollow 插件。我已经使用它来方便地实现这种效果。
您只需在要保留在视图中的元素上调用它:
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
可以配置缓动、位置和其他参数。
相关文章:
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- Firefox输入可以't在选择文本时滚动
- 当偏移量改变时滚动顶部
- 如何防止firefox在打开大型弹出窗口时滚动到页面底部
- 阻止在单击和关闭覆盖菜单css时滚动正文
- 反应路由器在每次转换时滚动到顶部
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 停止在锚点单击时滚动
- 单击onclick单元格时滚动到顶部
- 如何使侧边栏固定时滚动像粘性
- 单击链接时滚动至字段集
- 防止在刷新长HTML页面时滚动跳转
- JavaScript没有't第二次单击时滚动
- jScrollPane-重新初始化时滚动到底部
- 滚动条获胜't在所选元素不可见时滚动
- 如何使我的页面在加载时滚动到中间
- 您如何使其延迟并且直到 16 秒过去时才显示
- 引导手风琴,单击时滚动到活动(打开)手风琴的顶部
- 使 html 元素在滚动过去时保持原位
- 当滚动过去时位置更改为固定时,导航栏使内容跳跃