美文网首页
jQuery滚动到对应的标签高亮(添加颜色)

jQuery滚动到对应的标签高亮(添加颜色)

作者: 每天进步一点点5454 | 来源:发表于2021-02-05 15:33 被阅读0次

    我写的是一个右边是导航,左边是对应导航上的具体内容
    当鼠标滚动(上下)时内容到中间的位置对应的导航内容高亮(加个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~')) 
        
            
            
        }
    
    
    

    相关文章

      网友评论

          本文标题:jQuery滚动到对应的标签高亮(添加颜色)

          本文链接:https://www.haomeiwen.com/subject/tbxgtltx.html