定位导航制作

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

定位导航 制作

定位导航制作