單頁面官網-平滑過渡到指的錨點

月影發表於2019-02-16

特點

單頁面官網–不是傳說中的單頁面應用！
固定頂部，點選導航平滑過渡到指定錨點，滑鼠上下滾動到錨點位置導航隨之切換
如：考拉微課

HTML佈局

<!--頂部導航欄-->
<div  id="header">
    <ul class="nav">
        <li><a href="#con_1">Features</a></li>
        <li><a href="#con_2">Product Center</a></li>
        <li><a href="#con_3">Showcase</a></li>
        <li><a href="#con_4">Service & Support</a></li>
        <li><a href="#con_5">Contact Us</a></li>
        <div class="nav_focus"></div>
    </ul>
</div>
<!--內容區-->
<div class="container">
    <div id="con_1">111111</div>
    <div id="con_2">22222</div>
    <div id="con_3">333333</div>
    <div id="con_4">44444</div>
    <div id="con_5">55555</div>
</div>
<!--底部-->
<div id="footer">footer</div>

CSS樣式

導航欄的樣式要注意，這給當前樣式單獨做了一個DIV層，絕對定位，滑鼠移動到哪個導航，這個當前樣式層就移動到這個導航選單上。

<style>
    *{margin:0;padding:0;}
    li,ol,ul{list-style:none;}
    a{color:#555;text-decoration:none;}
    a:hover{color:#0380FF;text-decoration:none;}
    #header{position:fixed;top:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
    .nav{position:relative;display:flex;box-sizing:border-box;width:100%;height:40px;flex-direction:row;align-items:center;}
    .nav li{z-index:99;display:flex;margin-right:10px;flex:1;align-items:center;justify-content:center;}
    .nav li a{padding:0 10px;white-space:nowrap;font-size:18px;}
    .nav li a.cur{color:#0380FF;}
    .nav_focus{position:absolute;width:100px;height:40px;border:1px solid #0380FF;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,.5);}/*當前樣式層*/
    .container{margin-top:100px;}/*上邊距給一個頂部的高度，不至於被頂部導航覆蓋*/
    .container>div{height:800px;}
    #con_1{background-color:#ddf8ff;}
    #con_2{background-color:#f3ddff;}
    #con_3{background-color:#75b46f;}
    #con_4{background-color:#cfe053;}
    #con_5{background-color:#54ade0;}
    #footer{position:fixed;bottom:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
</style>

JS方法封裝

JS部分封裝一個外掛navScroll.js

/*  導航滾動外掛 引數：
*       navBox: 導航欄
*       navA: 導航列表，內部巢狀帶有錨點的a標籤
*       navFocus: 導航列表當前狀態
*       className：導航列表 當前狀態下的className
* */
function navScroll(navBox,navA,navFocus,className) {
    /* 設定 當前樣式 寬度 和 位置 ，初始為第一個導航的位置*/
    var index = 0; // 設定當前索引 初始為0
    var $sW = navA.eq(index).outerWidth();
    var $sL = navA.eq(index).position().left;
    navFocus.css({  width: $sW, left:  $sL });
    curClass(navA.eq(index));
    /* 滑鼠移入到導航欄 改變當前樣式*/
    navA.mouseenter(function () {
        curClass($(this));
        navFocusMove($(this));
    });
    // 滑鼠離開導航欄時 當前樣式回到 上次位置
    navBox.mouseleave(function () {
        navFocus.stop().animate( {
            width: $sW,
            left:  $sL
        },function () {
            /*給上一次導航新增當前樣式*/
            curClass(navA.eq(index))
        })
    });
    /*滾動到某個部分 對應導航改變樣式*/
    $(document).on(`scroll`,function(){
        var    docTop = $(document).scrollTop()+100,
            offsetTop=[];
        for(var i = 0,length = navA.length;i<length;i++){
            /*通過a標籤href來獲取ID選擇器，轉換為jq物件 使用jq方法*/
            offsetTop.push($($(navA[i]).attr("href")).offset().top);
            if( docTop>=offsetTop[i]){
                curNav(navA.eq(i));
                curClass(navA.eq(i));
                navFocusMove(navA.eq(i))
            }
        }
    });
    /* 點選導航時 改變導航樣式，文件平滑的滾動到指定的位置*/
    navA.click(function() {
        curNav($(this));
        curClass($(this));
        navFocusMove($(this));
        $("html, body").animate({
            /*根據a標籤href轉換為ID選擇器 獲取對應位置*/
            scrollTop: $($(this).attr("href")).offset().top - 100+"px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
// 當前樣式 移動函式
    function navFocusMove(that) {
        navFocus.stop().animate( {
            width: that.outerWidth(),
            left:  that.position().left
        })
    }
// 新增當前樣式，刪除其他當前樣式
    function curClass(curnavA) {
        curnavA.addClass(className).parent().siblings().find(`a`).removeClass(className);
    }
    /*記錄上一次當前樣式所在位置 */
    function curNav(obj) {
        $sW = obj.outerWidth();
        $sL = obj.position().left;
        index = obj.parent().index();
    }
    // 改變視窗大小時 設定 導航的當前樣式
    $(window).resize(function () {
        var $sW = navA.eq(index).outerWidth();
        var $sL = navA.eq(index).position().left;
        navFocus.css({  width: $sW, left:  $sL });
        }
    )

}

JS方法呼叫

在頁面中呼叫引用JQ庫以及這個 navScroll.js外掛

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/navScroll.js"></script>
<script>
    $(function() {
        // 獲取重要節點
        var $header = $(`#header`),
            $nav = $header.find(`.nav`),
            $nava =$nav.find(`li > a`),
            $navFocus = $nav.find(`.nav_focus`);
        navScroll($nav,$nava,$navFocus,`cur`);
    })
</script>

剛學完js的小白，思路都在註釋中，看不懂的請留言，不喜勿噴，歡迎指正！
完整案例

相關文章