在滚动到某个html元素之前,如何使其不被修复?因此,当用户滚动时,它将处于正常位置,但在用户滚过它后它不会离开屏幕?
答案 0 :(得分:1)
将监听器附加到onscroll
事件,如果scrollTop
大于元素的Y位置,请将其设置为position: fixed
。
答案 1 :(得分:0)
我之前使用过这段代码:
(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'});
});
答案 2 :(得分:0)
查看jQuery Scrollfollow plugin。我用它来方便地达到这个效果。
您只需在要保留的元素上调用它:
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
可以配置缓动,位置和其他参数。