js/jq滚动到一定位置后固定显示 | 站长学习网

滚动到指定位置之后我们就固定在左边，或右边，或顶部或底部效果，下面我来介绍三款滚动到一定位置后固定显示效果代码，有需要了解的朋友可参考。

js滚动到一定位置后固定显示

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<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 当元素滚动到顶部后固定位置

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript" src="http://code./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代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//固定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，同样按需修改

1 2 3 4 5

#fixed-siderbar{ z-index: 0; position:fixed; top:70px; }