定位导航制作

首页 > 代码库 > 定位导航制作

2024-10-05 21:27:02 216人阅读

html body 代码

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


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

定位导航制作

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 定位导航 制作

定位导航 制作

看完仍有疑问？有类似问题直接问程序猿

首页 > 代码库 > 定位导航制作

定位导航制作