MENU

魔改Mriages主题导航栏

July 2, 2020 • Read: 200 • 学习充电

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

描述:当页面下滑时,顶部导航栏自动隐藏,当页面上滑时,顶部导航栏自动展开。该效果可使在阅读时内容屏占比更高,更有沉浸感。

实现:在外观设置 - 主题自定义扩展 - 在 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---
  • 文章标题:魔改Mriages主题导航栏
  • 文章作者:飞进的船
  • 文章链接:https://www.fjdc.xyz/xxcd/145.html
  • 版权声明:本站原创内容均采用《署名-非商业性使用-相同方式共享 4.0 国际》进行许可,转载请注明出处。

  • Archives QR Code Tip
    QR Code for this page
    Tipping QR Code