jquery实现网页下拉后,元素固定到顶部效果。
一个本身不在页面顶部的元素,当页面滚动到其所在位置时,变为顶部固定。
没有找到此类插件,于是自己写了个, 很简单,没几行代码,兼容IE6+,firefox,safari,chrome
具体效果见右侧分类widget。
附代码如下
$(".fixed-content").each(function(){ var o = this; var timeout = null; var offset_top = $(o).offset().top; $(o).css({ "width": $(o).width(), "height": $(o).height() }); $(window).scroll(function(){ clearTimeout(timeout); if($("body").get(0).getBoundingClientRect().top <= -(offset_top + 10)){ if($.browser.msie && $.browser.version < 8){ timeout = setTimeout(function(){ $(o).css({ "position": "absolute", "z-index": 1000, "left": $(o).offset().left }) .animate({ "top": - $("body").get(0).getBoundingClientRect().top }) .addClass("col-fixed"); }, 200); }else{ $(o).css({ "position": "fixed", "top": 0, "z-index": 1000, "left": $(o).offset().left }) .addClass("col-fixed"); } }else{ $(o).css({ "position": "relative", "top": 0, "left": 0 }) .removeClass("col-fixed"); } }); });