带焦点的侧边滚动导航 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瞎折腾网</title>
    <script src="jquery-3.2.1.js" type="text/javascript"></script>
    <script src="带锚点的侧方导航.js" type="text/javascript"></script>
    <link rel="stylesheet" href="带锚点的侧方导航.css" type="text/css"/>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#floor1" class="current">1F</a></li>
        <li><a href="#floor2">2F</a></li>
        <li><a href="#floor3">3F</a></li>
        <li><a href="#floor4">4F</a></li>
        <li><a href="#floor5">5F</a></li>
    </ul>
</div>
<div id="main">
    <h1>瞎折腾网</h1>
    <div id="floor1" class="floor">
        <h2>1F</h2>
        <ul>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
        </ul>
    </div>
    <div id="floor2" class="floor">
        <h2>2F</h2>
        <ul>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
        </ul>
    </div>
    <div id="floor3" class="floor">
        <h2>3F</h2>
        <ul>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
        </ul>
    </div>
    <div id="floor4" class="floor">
        <h2>4F</h2>
        <ul>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li>
        </ul>
    </div>
    <div id="floor5" class="floor">
        <h2>5F</h2>
        <ul>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
            <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li>
        </ul>
    </div>
</div>
</body>
</html>
*{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
#main{
    width: 800px;
    margin: 0 auto;
    padding:20px;
}
#main h1{
    color:#0088bb;
}
.floor{
    padding: 30px;
    margin-top: 20px;
    border: 1px dotted #0088bb;
}
.floor h2{
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #0088bb;
}
#main .floor li{
    display: inline;
    margin-right: 15px;
}
#main .floor li a img{
    width: 230px;
    height: 230px;
    border: none;
    margin-top: 2px;
}
#nav{
    position: fixed;
    top: 200px;
    left: 50%;
    margin-left: -480px;
    width:80px;
}
#nav ul li a{
    font-size: 20px;
    display: block;
    color: #000;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #0088bb;
}
#nav ul li a:hover,
#nav ul li a.current{
    background-color: #0088bb;
    color: white;
}
$(function () {
    $(window).scrollTop(0);//刷新页面回到顶部
    $(window).scroll(function () {
        var top = $(document).scrollTop();//获取滚动条滚动位移
        var nav = $("#nav");/*获取整个导航*/
        var floors = $("#main").find(".floor");/*获取所有楼层模块*/
        var currentId = "";
        // 滚动条移动的时候，获取滚动条到浏览器顶的高度
        floors.each(function () {
            var m = $(this);
            var floorTop = m.offset().top;
            if(top>floorTop-400){
                currentId = "#"+m.attr("id");
            }else {
                return false;
            }
        });
        // 判断当前位置并更改当前盒子的class，从而使导航条跟随页面
        var currentLink = nav.find(".current");
        if(currentId&&currentLink.attr("href")!=currentId){
            currentLink.removeClass("current");
            nav.find("[href='"+currentId+"']").addClass("current");
        }
    });
});

 

posted @ 2017-09-02 23:12  Cooper_Yao  阅读(364)  评论(0)    收藏  举报