滚动到指定位置之后我们就固定在左边,或右边,或顶部或底部效果,下面我来介绍三款滚动到一定位置后固定显示效果代码,有需要了解的朋友可参考。
js滚动到一定位置后固定显示
<script type="text/javascript"> function htmlScroll() { var top = document.body.scrollTop || document.documentElement.scrollTop; if(elFix.data_top < top) { elFix.style.position = 'fixed'; elFix.style.top = 0; elFix.style.left = elFix.data_left; } else { elFix.style.position = 'static'; } } function htmlPosition(obj) { var o = obj; var t = o.offsetTop; var l = o.offsetLeft; while(o = o.offsetParent) { t += o.offsetTop; l += o.offsetLeft; } obj.data_top = t; obj.data_left = l; } var oldHtmlWidth = document.documentElement.offsetWidth; window.onresize = function(){ var newHtmlWidth = document.documentElement.offsetWidth; if(oldHtmlWidth == newHtmlWidth) { return; } oldHtmlWidth = newHtmlWidth; elFix.style.position = 'static'; htmlPosition(elFix); htmlScroll(); } window.onscroll = htmlScroll; var elFix = document.getElementById('fixedRight'); htmlPosition(elFix); </script>
jQuery 当元素滚动到顶部后固定位置
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { var elm = $('#pordAttr'); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function() { var p = $(window).scrollTop(); $(elm).css('position',((p) > startPos) ? 'fixed' : 'static'); $(elm).css('top',((p) > startPos) ? '0px' : ''); }); }); </script>
页面滚动时固定侧边栏效果
需要按各自的需求修改相应代码,完整的JavaScript代码如下:
//固定tag cloud jQuery(function () { //指定的高度,侧边栏距顶部距离+侧边栏高度+可视页面的高度 var sideTop=jQuery("#sidebar").offset().top+jQuery("#sidebar").height()+jQuery(window).height(); var scTop = function() { if( typeof window.pageYOffset != 'undefined') { return window.pageYOffset; } else if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { return document.documentElement.scrollTop } else if( typeof document.body != 'undefined') { return document.body.scrollTop; } } jQuery(window).scroll(function() { if (scTop() > sideTop) { if(jQuery("#fixed-siderbar").length == 0){ //下面是要显示的模块,复制侧边栏中的标签云内容,追加到侧边栏的底部 var tag = jQuery("#tag_cloud-2 .widget-wrap").clone().html(); var html="<div id='fixed-siderbar'><div id='fixed-wrap'><div id='fixedTag' class='widget widget_tag_cloud' >"+ tag +"</div></div></div>" jQuery("#sidebar").append(html); }else{ jQuery("#fixed-siderbar").show(); } }else{ jQuery("#fixed-siderbar").hide(); }; }); });
最后附上我的CSS,同样按需修改
#fixed-siderbar{ z-index: 0; position:fixed; top:70px; }