$.fn.smartFloat = function () {
var position = function (element) {
var top = element.offset().top,array=[],content=$(".content .items");
for(var i=1;i<content.length+1;i++){
array[i]= $('.content .items:nth-child('+i+')').offset().top;
}
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
for(var i=1;i<content.length+1;i++){
if(scrolls>array[i]&&scrolls<array[i+1]){
element.find("a").removeClass("active");
$('.slide li:nth-child('+i+')').find("a").addClass("active")
}else if(scrolls>array[i]){
element.find("a").removeClass("active");
$('.slide li:nth-child('+i+')').find("a").addClass("active")
}
}
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
"position": "fixed",
"top": "70px",
"z-index": "1000"
})
} else { //如果是ie6
element.css({top: scrolls});
}
} else {
element.css({"position": "relative","top":"0"})
}
});
};
return $(this).each(function () {
position($(this));
});
};
$("slide").smartFloat();
两个for循环实现监听分别获取高度和改变active的状态。
smartFloat()这个方法 ,不加这两个循环,是随屏幕滚动。。
**说明:**content= (“.content.items”)是需要监听的元素。 (‘.slide’) 相当于bootstrop 滚动监听的导航条。