MENU

魔改Typecho主题-Mirages

May 11, 2020 • Read: 99 • 技术笔记

顶部导航栏自动隐藏和展开

描述:当页面下滑时,顶部导航栏自动隐藏,当页面上滑时,顶部导航栏自动展开。该效果可使在阅读时内容屏占比更高,更有沉浸感。
实现:在外观设置-主题自定义扩展-在 body 标签结束前添加如下代码

<script type="text/javascript">
    $(function(){
        var cubuk_seviye = $(document).scrollTop();
        var header_yuksekligi = $('#navbar').outerHeight();
    
        $(window).scroll(function() {
            var kaydirma_cubugu = $(document).scrollTop();
    
            if (kaydirma_cubugu > header_yuksekligi){$('#navbar').css("top",-64+"px");} 
            
            else {$('#navbar').css("top",0+"px");}
    
            if (kaydirma_cubugu > cubuk_seviye){$('#navbar').css("top",-64+"px");} 
            else {$('#navbar').css("top",0+"px");}                
    
            cubuk_seviye = $(document).scrollTop();    
         });
    });
</script>