滚动浮动菜单

最新推荐文章于 2023-11-10 18:17:09 发布

diantiaozhu8383

最新推荐文章于 2023-11-10 18:17:09 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/junxi/p/5228480.html

版权

效果简介：滚到那个栏目一个fixed元素的栏目名就变色。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
       html{
           height: 2000px;
       }
       ul li{
             width:100%;
             height:200px;
             margin-bottom:100px;
             background:#333;
             color:#fff;
          }
          .active{display:block;width:150px;height:28px;color: red;background: #ff00ff;}
        </style>
            <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    </head>
    <body>
       <div style="position:fixed;top:50%;left:20%;">
            <a href="#aaa" data-top="-216">11121</a>
            <a href="#bbb" data-top="-216">11121</a>
            <a href="#ccc" data-top="-216">11121</a>
            <a href="#ddd" data-top="-216">11121</a>
            <a href="#eee" data-top="-216">11121</a>
       </div>
       <ul>
            <li id="aaa">111111</li>
            <li id="bbb">222222</li>
            <li id="ccc">33333</li>
            <li id="ddd">44444</li>
            <li id="eee">55555</li>
       </ul>
       <script>
          var oli=document.getElementsByTagName("li");
          var oa=document.getElementsByTagName("a");
          var arr=[];
                window.οnscrοll=function(){
                     scrolltop(200,100);    
                }
                function scrolltop(height,values){
                    for (var i = 0; i < oli.length; i++) {
                        if(oli[i].getBoundingClientRect().top>-(height+values)&&oli[i].getBoundingClientRect().top<=0){
                               oa[i].className="active";
                        }else{
                                oa[i].className="";
                        }
                    }
                }
        
          
       </script>
    </body>
</html>

演示地址: http://sandbox.runjs.cn/show/4leijpig

转载于:https://www.cnblogs.com/junxi/p/5228480.html

diantiaozhu8383

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动浮动菜单

效果简介：滚到那个栏目一个fixed元素的栏目名就变色。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> html{ height: 2000px;...
复制链接

扫一扫