feat(navbar):导航栏添加下滑隐藏，上划展示功能，优化当前导航栏固定的动画效果，close #11

nineya · Mar 25, 2022 · b446955 · b446955
1 parent df6adbd
commit b446955
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git a/layout/common/head.ftl b/layout/common/head.ftl
@@ -43,7 +43,7 @@
             .column-main.is-sticky,
             .column-right-shadow.is-sticky,
             .column-right.is-sticky {
-                top: ${(settings.navbar_top??&&settings.navbar_top)?string('70','10')}px;
+                top: ${(settings.navbar_show??&&settings.navbar_show == 'fixed')?string('70','10')}px;
             }
         }
     </style>

diff --git a/layout/common/navbar.ftl b/layout/common/navbar.ftl
@@ -1,5 +1,5 @@
 <#macro navbar>
-<nav class="navbar navbar-main${(settings.navbar_top??&&settings.navbar_top)?string(' navbar-top"','')}">
+<nav class="navbar navbar-main${(settings.navbar_show??&&settings.navbar_show!='normal')?string(' navbar-fixed' + (settings.navbar_show??&&settings.navbar_show=='dynamic')?string(' navbar-dynamic',''),'')}">
     <div class="container">
         <div class="navbar-brand is-flex-center">
             <a class="navbar-item navbar-logo" href="${context!}">

diff --git a/settings.yaml b/settings.yaml
@@ -6,17 +6,18 @@ basic:
       label: 网站副标题
       type: text
       placeholder: '网站副标题'
-    navbar_top:
-      name: navbar_top
-      label: 导航栏固定
-      type: radio
-      data-type: bool
-      default: false
+    navbar_show:
+      name: navbar_show
+      label: 顶部导航栏展示
+      type: select
+      default: 'normal'
       options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
+        - value: normal
+          label: '默认模式'
+        - value: dynamic
+          label: '动态展示'
+        - value: fixed
+          label: '固定顶部'
     background_pc:
       name: background_pc
       label: PC端博客背景图

diff --git a/source/css/style.css b/source/css/style.css
@@ -131,11 +131,24 @@ img.thumbnail {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
-.navbar-top {
+.navbar-fixed {
   position: sticky;
   top: 0;
 }
 
+.move-up{
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  -ms-transition: all 0.5s;
+  transition: all 0.5s;
+  -webkit-transform: translate3d(0, -100%, 0);
+  -moz-transform: translate3d(0, -100%, 0);
+  -o-transform: translate3d(0, -100%, 0);
+  -ms-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+}
+
 .navbar-main .navbar-menu,
 .navbar-main .navbar-start,
 .navbar-main .navbar-end {

diff --git a/source/js/animation.js b/source/js/animation.js
@@ -42,5 +42,6 @@
                 i++;
             });
         });
+        $(".navbar-dynamic")[0].style.transform = ''
     });
 })();
diff --git a/source/js/main.js b/source/js/main.js
@@ -13,17 +13,34 @@
     if (!urlstatus) {
         $(".navbar-start a").eq(0).addClass('is-active');
     }
+    let initTop = 0
+    // true：上划，false：下滑
+    function scrollDirection (currentTop) {
+        const result = currentTop > initTop
+        initTop = currentTop
+        return result
+    }
+    var flag = false;
     // 多行显示时，滚动折叠网站logo
     $(document).scroll(function() {
-        if($(window).width() < 1024) {
-            var afterScrollTop = $(document).scrollTop()
-            if(afterScrollTop<=0){
-                $(".navbar-top>.container .navbar-brand").stop().fadeIn(500);
-            }else{
-                $(".navbar-top>.container .navbar-brand").stop().fadeOut(500);
+        var scrollTop = $(document).scrollTop()
+        const direction = scrollDirection(scrollTop);
+        if($(window).width() < 1024 && !flag) {
+            if(scrollTop<=100){
+                flag = true;
+                $(".navbar-fixed>.container .navbar-brand").slideDown(200, function(){flag = false});
+            }else if(scrollTop>150){
+                flag = true;
+                $(".navbar-fixed>.container .navbar-brand").slideUp(200, function(){flag = false});
             }
         }
+        if (direction && scrollTop>150) {
+            $(".navbar-dynamic").addClass("move-up");
+        } else {
+            $(".navbar-dynamic").removeClass("move-up");
+        }
     });
+
     // 用链接和标题包装图像
     $('.article img:not(".not-gallery-item")').each(function () {
         if ($(this).parent('a').length === 0) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,5 +42,6 @@ @@
                     i++;
                 });
             });
+            $(".navbar-dynamic")[0].style.transform = ''
         });
     })();