使用JavaScript做网页定位导航特效（上）

男娘i 2022-06-08 05:41 198阅读 0赞

### 网页定位导航特效（上） ###

一、**特效分析**

左侧是内容，右侧是悬浮的导航菜单，左侧滚动时，右侧内容不改变位置；点击右侧链接，左侧定位到相应栏目，左侧滚动到相应栏目，右侧定位到对应链接。

**重难点：**

*  左侧栏目和右侧导航菜单的显示样式实现
 *  导航与滚动条之间的定位关联  
    ![这里写图片描述][20170916163122845]

![这里写图片描述][20170916163227952]

二、**特效设计**

**技术点：**

*  锚点（anchor）—网页制作中超链接的一种，页面内的超级链接
 *  关于滚动条定位的事件和方法

1、onscroll：当用户滚动指定的元素时，会发生滚动（scroll）事件，适用于所有可滚动的元素和window对象（浏览器窗口）。

(1)当页面滚动条变化时，执行函数：
        window.onscroll = function(){}
    
    (2)document.documentElement.scrollTop || document.body.scrolltop:
        获取/设置匹配元素相对滚动条里顶部的偏移

2、offset：获取匹配元素的相对偏移。（offsetTop、offsetLeft）

返回的是一个值

三、**代码实现**

1、html样式

<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>
        </div>
        <div id="content">
            <h1>地狗购物网</h1>
            <div id="item1" class="item">
                <h2>1F 男装</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                </ul>
            </div>
            <div id="item2" class="item">
                <h2>2F 女装</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151508391"/></a></li>
                </ul>
            </div>
            <div id="item3" class="item">
                <h2>3F 美妆</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
                </ul>
            </div>
            <div id="item4" class="item">
                <h2>4F 数码</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
                </ul>
            </div>
            <div id="item5" class="item">
                <h2>5F 母婴</h2>
                <ul>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                    <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
                </ul>
            </div>
        </div>
    </body>

2、CSS样式

3、JavaScript样式

（1）创建函数getByClassName，根据className获取元素

（2）扩展addClass和removeClass

/*判断className里字符串是否包含传入的cls（正则校验）*/
    function hasClass(obj, cls) { 
        return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }
    /*如果有cls类*/
    function removeClass(obj, cls) { 
        if (hasClass(obj, cls)) {
            //remove
            var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
            obj.className = obj.className.replace(reg, "");
        }
    }
    /*如果没有cls类*/
    function addClass(obj, cls) { 
        if (!hasClass(obj, cls)) {
            obj.className += " " + cls;
        }
    }

（3）JavaScript代码

这里需要注意的是`document.documentElement.scrollTop`和`document.body.scrolltop`，详情参考[document.body.scrollTop与document.documentElement.scrollTop兼容][document.body.scrollTop_document.documentElement.scrollTop]和[js中document.documentElement 和document.body 以及其属性][js_document.documentElement _document.body]

今天这个效果就到这里，下一节展示使用jQuery制作效果。

<!DOCTYPE html>
    <html>
        <head lang="en">
        <meta charset="UTF-8">
        <title>地狗购物网—网页定位导航效果</title>
        <style> * { margin: 0; padding: 0; } body { font-size: 12px; line-height: 1.7; } li { list-style: none; } #content { width: 800px; margin: 0 auto; padding: 20px; } #content h1 { color: #0088bb; } #content .item { padding: 20px; margin-bottom: 20px; border: 1px dotted #0088bb; } #content .item h2 { font-size: 16px; font-weight: bold; border: 2px solid #0088bb; margin-bottom: 10px; } #content .item li { display: inline; margin-right: 10px; } #content .item li a img { width: 230px; height: 230px; border: none; } #menu { position: fixed; top: 100px; left: 50%; margin-left: 400px; width: 80px; } #menu ul li a { display: block; margin: 5px 0; font-size: 14px; font-weight: bold; color: #333; width: 80px; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } #menu ul li a:hover, #menu ul li a.current { color: #fff; background-color: #0088bb; } /*ie6 hack*/ * html, *html body { background-image: url(about:blank); background-attachment: fixed; } * html #menu { position: absolute; top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+"px"); } </style>
        </head>
        <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>
        </div>
        <div id="content">
          <h1>地狗购物网</h1>
          <div id="item1" class="item">
            <h2>1F 男装</h2>
            <ul>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
            </ul>
          </div>
          <div id="item2" class="item">
            <h2>2F 女装</h2>
            <ul>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151344792"/></a></li>
            </ul>
          </div>
          <div id="item3" class="item">
            <h2>3F 美妆</h2>
            <ul>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151635652"/></a></li>
            </ul>
          </div>
          <div id="item4" class="item">
            <h2>4F 数码</h2>
            <ul>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151742932"/></a></li>
            </ul>
          </div>
          <div id="item5" class="item">
            <h2>5F 母婴</h2>
            <ul>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
              <li><a href="#"><img src="https://img-blog.csdn.net/20170916151924663"/></a></li>
            </ul>
          </div>
        </div>
        <script> //根据className获取元素 function getByClassName(obj, cls) { var elements = obj.getElementsByTagName("*"); var result = []; for (var i = 0; i < elements.length; i++) { if (elements[i].className == cls) { result.push(elements[i]); } } return result; } function hasClass(obj, cls) { return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); } function removeClass(obj, cls) { if (hasClass(obj, cls)) { //remove var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); obj.className = obj.className.replace(reg, ""); } } function addClass(obj, cls) { if (!hasClass(obj, cls)) { obj.className += " " + cls; } } window.onload = function() { window.onscroll = function() { var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; //console.log(top); var menus = document.getElementById("menu").getElementsByTagName("a"); var items = getByClassName(document.getElementById("content"), "item"); var currentId = ""; for (var i = 0; i < items.length; i++) { var _item = items[i]; var _itemTop = _item.offsetTop; if (top > _itemTop - 150) { currentId = _item.id; } else { break; } } if (currentId) { //给正确的menu下的a元素class赋值 for (var j = 0; j < menus.length; j++) { var _menu = menus[j]; var _href = _menu.href.split("#"); if (_href[_href.length - 1] != currentId) { removeClass(_menu, "current"); } else { addClass(_menu, "current"); } } } } } </script>
        </body>
    </html>

[20170916163122845]: /images/20220608/943b9258da9a4fa09a5a2df90dc7873f.png
[20170916163227952]: /images/20220608/d5beaa22ad4949ff8ee64bffb5010f07.png
[document.body.scrollTop_document.documentElement.scrollTop]: http://blog.csdn.net/lploveme/article/details/7011174
[js_document.documentElement _document.body]: http://renshengkai.blogchina.com/1534285.html