我写的是一个右边是导航,左边是对应导航上的具体内容
当鼠标滚动(上下)时内容到中间的位置对应的导航内容高亮(加个color)
- 还有一个是window的方法(设置滚动条距离):
window.scroll(x,y)
以后修改
因为每次滚动都要调用就封装了一下
function navlist(getlist,navcolor) {
从第一个开始
if (getlist.length > 0) {
获取到当前距离顶部的位置
var top = document.documentElement.scrollTop || document.body.scrollTop;
当前内容不能为空(忘记写这个是有什么用了)
if (getlist.html().trim() != '') {
获取当前距离顶部的位置
var p2 = getlist.offset().top;
鼠标滚动的距离-div固定的距离=现在div离顶部的距离
var con2 = parseInt(p2) - parseInt(top);
当现在div距离大于0并且小于450就差不多中间的位置,添加颜色
if(con2>0&&con2<450){
navcolor.css('color', '#226CE8').parent().siblings().find('a').css('color', '#333');
}
}
}
}
window.onscroll = function () {
//大于300右边整个导航固定,反之不固定
if ($(window).scrollTop() > 300) {
$("nav").css({ "position": "fixed", "top": 100, "width": "200px", "z-index": 999, 'background': '#fff' });
} else {
$("nav").css({ "position": "static", 'background': '#fff' });
}
navlist($("当前的判断的div"),$('添加颜色的标签,因为是a标签so~'))
}
网友评论