MENU

魔改 Typecho 主题 - Mirages

• July 16, 2020 • 信息互联

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

描述:当页面下滑时,顶部导航栏自动隐藏,当页面上滑时,顶部导航栏自动展开。该效果可使在阅读时内容屏占比更高,更有沉浸感。
实现:在外观设置 - 主题自定义扩展 - 在 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>
- - - The END - - -
  • 文章标题:魔改 Typecho 主题 - Mirages
  • 文章链接:http://blog.uiuweb.cn/index.php/archives/12164.html
  • 版权所有:本文版权归 刘一彪 所有,转载请注明出处!除特殊注明外 (如有侵权,请 点此联系我 )
  • Archives QR Code Tip
    QR Code for this page
    Tipping QR Code
    Leave a Comment