製做stick側邊欄導航效果

其實這種效果網上好多的插件，可是我想本身實現看看，其實把思路理清實現起來就很是簡單了，讓咱們看看：

分析：

從圖中咱們能夠看出：右邊的top=100px，那麼它應該在第一個框的top+height=150px區域內，

 當鼠標滾動到第2個區域時，同理，右邊的top，應該在第2個框的top+height內 ，這樣思路理清了，那麼接下來咱們來實現吧。

<nav class="sidebar">
        <ul>
            <li>F1-植物王國</li>
            <li>F2-動物世界</li>
            <li>F3-科學探祕</li>
            <li>F4-文化節日</li>
            <li>F5-成長健康</li>
            <li>F6-生活百科</li>
            <li>F7-藝術欣賞</li>
            <li>F8-語言樂園</li>
            <li>F9-數學小天地</li>
        </ul>
    </nav>

/*側邊欄開始*/
.sidebar {
    border: 1px solid #E5E9EF;
    position: fixed;
    width: 100px;
    right: 12%;
    top: 45%;
    border-radius: 4px;
}

.sidebar>ul {
    
}

.sidebar>ul>li {
    padding: 10px;
    width: 100px;
    cursor: pointer;
}

.sidebar .active {
    background-color: #06A3D7;
    color: #fff;
}
/*側邊欄結束*/

$(window).scroll(function() {
        //這裏是要顯示的div的id，必定要按照從上到下的順序排列，若是有新的能夠日後加
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var top = $('.sidebar ul li').eq(i).offset().top;
            var t = $('#' + tops[i]).offset().top;
            var h = $('#' + tops[i]).height();
            if (top > t && top < t + h) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            }
            if (top < t && i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

 

效果圖：

總結：

一、剛開始作的時候沒有思緒，而後一個朋友給了一段本身寫的代碼，我就參考一下而後本身優化了一下它的代碼

二、默認在頁面最上面應該不顯示active狀態，因此第2個if判斷相當重要！！！

參考：

http://www.bootcss.com/p/stickup/

 

 

===========================================分割線=========================================================

上面是依據sidebar來判斷div的，也就是說當div和sidebar同處同一水平線，那麼導航就高亮，如今我參照bilibili的網站，它的是當div在屏幕可見區域1/4位置時導航就高亮，因此代碼改爲：

$(document).on('scroll', function() {
        var height = $(window).height();
        var tops = [ 'f1', 'f2', 'f3', 'f4' ];
        for (var i = 0; i < tops.length; i++) {
            var rectop = $('#' + tops[i])[0].getBoundingClientRect().top;
            console.log('rectop=' + rectop)
            if (rectop < height /4) {
                $('.sidebar ul li').removeClass('active');
                $('.sidebar ul li').eq(i).addClass('active');
            } else if (i == 0) {
                $('.sidebar ul li').removeClass('active');
            }
        }
    });

    $(".sidebar ul li").click(function(e) {
        var index = $(this).index();
        var height = $(window).height();
        $("html,body").animate({
            scrollTop : $('#f' + (parseInt(index) + 1)).offset().top
        }, 500);
    });
    $(".sidebar a").click(function(e) {
        $("html,body").animate({
            scrollTop : $('body').offset().top
        }, 500);
    });

 總結：這樣雖然完成了，可是最後一個div若是沒有達到屏幕可見區域的1/4位置，那麼導航就不高亮，bilibili的作法是，直接去掉最後一個導航，而個人作法是最後div的margin-bottom設置成200px，那就會「撐」到1/4位置了。

參考：http://www.bilibili.com/