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 oldHtmlWidth = document.documentElement.offsetWidth; var elFix = document.getElementById('fixedRight'); </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() { |
最后附上我的CSS,同样按需修改
代码如下 | 复制代码 |
#fixed-siderbar{ z-index: 0; position:fixed; top:70px; } |
效果如下