Jquery實現滾動條下移隱藏導航欄，上移浮現導航欄

通過 jquery 實現滾動條上移，導航欄浮現，滾動條下移，隱藏導航欄

JS

// 導航欄上拉懸浮
$(function(){
    //頁面初始化的時候，獲取滾動條的高度（上次高度）
    var start_height = $(document).scrollTop();
    //獲取導航欄的高度(包含 padding 和 border)
    var navigation_height = $('.navbar-rg').outerHeight();
    $(window).scroll(function() {
        //觸發滾動事件後，滾動條的高度（本次高度）
        var end_height = $(document).scrollTop();
        //觸發後的高度 與 元素的高度對比
        if (end_height > navigation_height){
            $('.navbar').css('top', '-50px');
        }else {
            $('.navbar').css('top', '0');
        }
        //觸發後的高度 與 上次觸發後的高度
        if (end_height < start_height){
            $('.navbar').css('top', '0');
        }
        //再次獲取滾動條的高度，用於下次觸發事件後的對比
        start_height = $(document).scrollTop();
    });
});

這裏我通過position 的 top 實現顯示和隱藏，50px即導航條的高度，你也可以簡單的使用display:block和display:none，因爲我給.navbar加了延時效果transition

CSS

.navbar {
	position: fixed;
	left: 0;
	top: 0;
	height: 50px;
	transition: top .4s;
}
body {
	padding-top: 50px;
}

display版本：

JS

$(function(){  
    //頁面初始化的時候，獲取滾動條的高度（上次高度）  
    var start_height = $(document).scrollTop();  
    //獲取導航欄的高度(包含 padding 和 border)  
    var navigation_height = $('.navigation').outerHeight();  
    $(window).scroll(function() {  
        //觸發滾動事件後，滾動條的高度（本次高度）  
        var end_height = $(document).scrollTop();  
        //觸發後的高度 與 元素的高度對比  
        if (end_height > navigation_height){  
            $('.navigation').addClass('hide');  
        }else {  
            $('.navigation').removeClass('hide');  
        }  
        //觸發後的高度 與 上次觸發後的高度  
        if (end_height < start_height){  
            $('.navigation').removeClass('hide');  
        }  
        //再次獲取滾動條的高度，用於下次觸發事件後的對比  
        start_height = $(document).scrollTop();  
    });  
});