定位导航制作

html body 代码

<body>
    <div id="menu">
        <ul>
            <!--运用锚点，实现导航定位。-->


            <li><a href="#item1" class="current">1F 男装</a></li>
            <li><a href="#item2">2F 女装</a></li>
            <li><a href="#item3">3F 美妆</a></li>
            <li><a href="#item4">4F 数码</a></li>
            <li><a href="#item5">5F 母婴</a></li>
          
        </ul>
          <span id="span"></span>
    </div>
    <div id="content">
        <h1>地狗购物网</h1>

        <div id="item1" class="item">
            <h2>1F 男装</h2>
            <ul>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/53660fce0001111903990422.jpg" alt="" /></a></li>
            </ul>
        </div>
        <div id="item2" class="item">
            <h2>2F 女装</h2>
            <ul>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg" alt="" /></a></li>
            </ul>
        </div>
        <div id="item3" class="item">
            <h2>3F 美妆</h2>
            <ul>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610820001cf5b03990422.jpg" alt="" /></a></li>
            </ul>
        </div>
        <div id="item4" class="item">
            <h2>4F 数码</h2>
            <ul>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610ac00012df703990422.jpg" alt="" /></a></li>
            </ul>
        </div>
        <div id="item5" class="item">
            <h2>5F 母婴</h2>
            <ul>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
                <li><a href="#">
                    <img src="http://img.mukewang.com/536610cd0001f34603990422.jpg" alt="" /></a></li>
            </ul>
        </div>
        </div>
</body>

View Code

js代码

 window.onload = function () {

            window.onscroll = function () {
                //滚动到一定高度的  距离顶部的距离
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                document.getElementById("span").innerHTML = top;
               // alert(document.getElementById("item2").offsetTop);
                var items = document.getElementsByClassName("item");
                var iditem = "";
                for (var i = 0; i < items.length; i++)
                {
                    if (top > items[i].offsetTop-100) {
                        iditem = "#"+items[i].getAttribute("id");
                    }
                    else { break;}
                }
                

                var menuitems = document.getElementById("menu").getElementsByTagName("a");
                var aa = "";
                for (var i = 0; i < menuitems.length; i++)
                {
                    if (menuitems[i].getAttribute("href") == iditem) {
                        menuitems[i].setAttribute("class", "current");
                        
                    }
                    else {
                        menuitems[i].removeAttribute("class");
                    }
                   
                }
               
            }
        }

View Code

相关阅读:
动态改变shiro的Principal属性
 有邻App覆盖3000多个小区成杭州用户量最大的邻里分享经济平台杨仁斌：开创新社区时代
 "有邻"创始人：APP覆盖杭州千余小区却还没认真想过赚钱的事
 Shell if 条件判断
 大关小学和卖鱼桥小学哪个好杭州重点小学对比
 测试覆盖率 Java 覆盖率 Jacoco 插桩的不同形式总结和踩坑记录
 使用Jacoco获取 Java 程序的代码执行覆盖率
 Android Studio Error running app: No target device found 问题
 android studio连接雷电模拟器
 Android Studio 下载Gradle 超时解决方案
原文地址：https://www.cnblogs.com/zhangwei99com/p/7004442.html

定位导航 制作

定位导航制作