[英]Make html element stay in place when scrolled past
在滾動到html元素之前,如何使html元素不固定? 因此,當用戶滾動時,它將處於正常位置,但是在用戶滾動經過它之后,它不會離開屏幕嗎?
將偵聽器附加到onscroll
事件,如果scrollTop
大於元素的Y位置,則將其設置為position: fixed
。
我以前使用過此代碼:
(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>
可以配置緩動,位置和其他參數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.