实现滚动导航效果

由于近期有一个页面需要滚动加导航效果，以前在网上搜了一个鼠标滚动事件做了一个效果，但代码太冗余，不喜欢，所以抽时间研究了一下，使用jquery+滚动监听写了一个小demo,希望能帮助到有需要的朋友。

代码如下：

<style type="text/css">
            .cont li{
                display: inline-block;
                width: 100px;
                height: 100px;
                margin: 0 20px;
            }
            .cont ul{
                display: inline-block;
                width: 500px;
                text-align:left;
                border: 1px dotted #FFACAC;
            }
            .cont{
                text-align: center;
                width: 600px;
                margin: 0 auto;
                border:1px solid #00FFFF
            }
            .menu{
                position: fixed;
                right: 500px;
                top: 100px;
            }
            .menu ul{
                list-style: none;
            }
            .menu li{
                cursor: pointer;
            }
            .menu ul a{
                color: #00FFFF;
                text-decoration: none;
            }
            .menu ul li.act a{
                color: #FF6666;
            }
</style>

<div class="menu">
            <ul>
                <li class="act" data-url="item1"><a>第一个</a></li>
                <li data-url="item2"><a>第二个</a></li>
                <li data-url="item3"><a>第三个</a></li>
                <li data-url="item4"><a>第四个</a></li>
            </ul>
        </div>
        <div class="cont">
            <ul>
                <p id="item" data-val="0">第一个</p>
                <li><a href=""><img src=""/></a></li>
            </ul>
            <ul>
                <p id="item" data-val="1">第二个</p>
                <li><a href=""><img src="/></a></li>
            </ul>
            <ul>
                <p id="item" data-val="2">第三个</p>
                <li><a href=""><img src=""/></a></li>
                
            </ul>
            <ul>
                <p id="item" data-val="3">第四个</p>
                <li><a href=""><img src=""/></a></li>
            </ul>
 </div>

<script type="text/javascript">
$(function(){
                var top1=$("#item1").offset().top;
                var top2=$("#item2").offset().top;
                var top3=$("#item3").offset().top;
                var top4=$("#item4").offset().top;
                
                $(".menu li").click(function(){
                    scrollH=$("#"+$(this).attr("data-url")).offset().top;
                    $("html,body").animate({ "scrollTop": scrollH }, 600);
                })
                
                $(window).scroll(function(){//鼠标滚动监听
                    var h=$(window).scrollTop();//获取滚动条高度
                    console.log(top4,h)
                    if(h>top4-100){
                        $(".menu li").removeClass();
                        $(".menu li")[3].setAttribute("class","act")
                    }else if(h>top3-100){
                        $(".menu li").removeClass();
                        $(".menu li")[2].setAttribute("class","act")
                    }else if(h>top2-100){
                        $(".menu li").removeClass();
                        $(".menu li")[1].setAttribute("class","act")
                    }else if(h>top1-100){
                        $(".menu li").removeClass();
                        $(".menu li")[0].setAttribute("class","act")
                    }
                })
                
            })
</script>

这个js内容比较多，然后我又优化了一下，当然，两个js都可以实现，但是使用上面一个js需要将html里面的p标签的class改为对应的item1...，还有，html里面的内容必须要把整个页面的内容都撑开，不然无法使用。

<script type="text/javascript">
$(function(){
                //获取页面上的item
                var items=$(".cont #item");
                console.log(items)
                $(".menu li").click(function(){
                    var i=$(this).index();
                    console.log(items[i])
                    scrollH=items[i].offsetTop;
                    $("html,body").animate({ "scrollTop": scrollH }, 600);
                })
                $(window).scroll(function(){//鼠标滚动监听
                    var h=$(window).scrollTop();//获取滚动条高度
                    items.each(function(){
                        if(h>$(this).offset().top-100){
                            var i=$(this).attr("data-val");
                            $(".menu li").removeClass();
                            $(".menu li")[i].setAttribute("class","act");
                        }
                    })
                })
            })
 </script>

配图：

 注：此demo实现思路是借鉴了慕课网https://www.imooc.com/video/782的案例。但是里面使用的是css的 expression表达式得到的，由于在网上了解到 expression具有危险性，所有并没有使用此方法。

源代码：https://github.com/G-xiaojianwei/study_demo/blob/master/%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C.html