JS及JQ实现网页侧边导航定位

一、JS

<!DOCTYPE html>
<html>
<head>
<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-bottom: 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: #0088bb;
        }

        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

</style>
<script>
    
  //定义getByClassName函数，让函数实现根据class name获取对象并返回
    function getByClassName( obj , cls ){
        var allEles = obj.getElementsByTagName('*');
        var eles = [];
        for(var i = 0;i < allEles.length;i++){
            if(allEles[i].className == cls){
                eles.push(allEles[i]);
            }
        }
        return eles;
    }
    
    function hasClass( obj, cls ){ 
        return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
    }
    
    function removeClass( obj, cls ){ 
        if( hasClass( obj, cls )){ 
            var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
            obj.className = obj.className.replace(reg, "");
        }
    }
    
    //定义getByClassName函数，让函数实现给对象增加class 
    function addClass( obj , cls ){
        if(!hasClass( obj, cls )){
            obj.className += ' ' + cls;
        }
    }
    
    window.onload = function(){ 
        
        window.onscroll = function(){       
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            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 - 200 ){ 
                    currentId = _item.id;
                } else { 
                    break;
                }           
            }
            for( var i = 0;i<menus.length;i++){
                removeClass(menus[i] , 'current');
                var menuHref = menus[i].href.split('#');
                var menuCls = menuHref[menuHref.length-1];
                if(menuCls == currentId){
                    addClass(menus[i],'current');
                }
            }
        }   
    }   
</script>
</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="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>
</html>

二、JQ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页定位导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            width: 800px;
            padding: 20px;
            margin: 0 auto;
        }

        #content h2 {
            margin-bottom: 5px;
            color: #0088bb;
        }

        #content .item {
            padding: 20px;
            border: 1px dotted #0088bb;
            margin-bottom: 20px;
        }

        #content .item h3 {
            border-bottom: 2px solid #0088bb;
            margin-bottom: 5px;
        }

        #content .item ul {
            line-height: 0;   /*为了消除行内块元素底部与父元素的间隔*/
        }

        #content .item li {
            display: inline-block;
            margin: 5px 1px;
        }

        #content .item li a {
            display: block;
        }

        #content .item li a img {
            width: 230px;
            height: 230px;
        }

        #menu {
            position: fixed;
            left: 50%;
            margin-left: 400px;
            top: 100px;
        }

        #menu li {
            list-style-type: none;
        }

        #menu a {
            display: block;
            width: 80px;
            height: 50px;
            color: #333;
            font-size: 16px;
            font-weight: bold;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }

        #menu a:hover {
            color: #FFF;
            background-color: #0088bb;
            
        }

        #menu .current {
            color: #FFF;
            background-color: #0088bb;
        }

        /*ie6 hack*/
        * html #menu {
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

        * html,
        * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }


    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script>
        $(document).ready(function(){
            $(window).scroll(function(){
                var currentfloor;
                $('.item').each(function(){
                    var $this = $(this);
                    if($(document).scrollTop()>$this.offset().top-200){
                        currentfloor = '#'+$this.attr('id');
                        var $focus = $('#menu a.current');
                        if(currentfloor && $focus.attr('href')!=currentfloor){
                            $focus.removeClass('current');
                            $('#menu a[href='+currentfloor+']').addClass('current');
                        }
                    }else{
                        return false;
                    }
                });
            });
        });
    </script>
</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'>
        <h2>购物网</h2>
        <div class='item' id='item1'>
            <h3>1F男装</h3>
            <ul>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/53660fce0001111903990422.jpg"></a></li>
            </ul>
        </div>
        <div class='item' id='item2'>
            <h3>2F女装</h3>
            <ul>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/5366104c0001e5c403990422.jpg"></a></li>
            </ul>
        </div>
        <div class='item' id='item3'>
            <h3>3F美妆</h3>
            <ul>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610820001cf5b03990422.jpg"></a></li>
            </ul>
        </div>
        <div class='item' id='item4'>
            <h3>4F数码</h3>
            <ul>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610ac00012df703990422.jpg"></a></li>
            </ul>
        </div>
        <div class='item' id='item5'>
            <h3>5F母婴</h3>
            <ul>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
                <li><a href="#"><img src="http://img.mukewang.com/536610cd0001f34603990422.jpg"></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

遇到的问题及注意事项：

1、inline-block元素下方会与父元素有几像素间距，是由Vertical-Align、font-size和line-height导致的。解决方法，①inline-block元素设为块元素 ②父元素的font-size或者line-height设为0。参考https://www.zhihu.com/question/26821863

2、JS的传递类型为：基本类型按值传递，对象类型按共享传递。具体参考http://www.jb51.net/article/60568.htm 及其评论。

3、getElementsByTagName('*')的参数可以使用星号*表示获取所有元素，getElementsByClassName()则不行。

posted @ 2017-05-15 21:44 oliverlht 阅读(379) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

oliverlht

JS及JQ实现网页侧边导航定位

公告