版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ck3345143/article/details/50541976
导航条固定及浮动的实现
调用:
在工作过程中,项目用到的功能。
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top;
var pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
//if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
if(scrolls > 150) {//如果滚动到页面超出最上面的导航条高度(此处150px最佳)
if (window.XMLHttpRequest) { //如果不是ie6
element.css({
position: "fixed",//固定定位
top: '50px',//距离页面顶部为top
display: 'block'
});
} else { //如果是ie6
element.css({
top: scrolls
});
}
}else {
element.css({//如果当前元素element未滚动到浏览器边缘,则使用默认样式
position: pos,
top: top,
display: 'block'
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
调用:
$(function () {
$("#left-menu").smartFloat();
});