定位导航 制作

Posted 天晴微笑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定位导航 制作相关的知识，希望对你有一定的参考价值。

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

 

以上是关于定位导航 制作的主要内容，如果未能解决你的问题，请参考以下文章

导航抽屉片段 Sqlite

从一个片段移动到另一个片段时如何自动选择底部导航？

如何使用导航组件处理片段内的向上按钮

如何在主片段中单击按钮时打开导航抽屉？

通过片段之间的导航传递数据android studio

像导航抽屉一样切换片段（带后退箭头）