feat: 头部固定采用sticky

weipxiu · weipxiu · commit 9cc0efbcb980 · 2022-05-29T23:21:24.000+08:00
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ V、主题开源，唯一支持作者的方式是下方打赏[支付宝/微信]
 I、wordPress主题制作有独特规范，如主题根目录必须存在header.php、index.php、footer.php、style.css，否则主题视为"不完整"，无法安装。
 因此不用觉得某些文件不合理，存在即有意义
 
-II、为了用户最佳浏览体验，该主题对≤IE8作了屏蔽跳转，≥IE9版本可能无法完整展示CSS3效果，但会尽量兼容到不影响阅读
+II、```v2.9.0后不再对IE支持```，如需兼容IE9及以上可下载之前老版本
 
 III、CSS文件基于终端做分割，因此你会看到主题目录dist > css文件夹中有style-pc.css、style-ios.css、style-ipd.css三个文件，没错，三端样式完全独立不重用，不过你完全不用过分担心，打包后多端样式会合并压缩到style_min.css，代价没你想象的那么大，有利有弊，不予置评
 
diff --git a/dist/Art_Blog/css/style_min.css b/dist/Art_Blog/css/style_min.css
diff --git a/dist/Art_Blog/index.php b/dist/Art_Blog/index.php
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-<meta name='generator' content='WordPress/Art_Blog v2022-05-29 20:35:05'>
+<meta name='generator' content='WordPress/Art_Blog v2022-05-29 22:25:13'>
 <title><?php $name = wp_title( '-', true, 'right' );
 		if ($name) {
 			echo $name . "&nbsp;-&nbsp;" . get_bloginfo('description');
diff --git a/dist/Art_Blog/js/main_min.js b/dist/Art_Blog/js/main_min.js
diff --git a/dist/Art_Blog/page-time.php b/dist/Art_Blog/page-time.php
@@ -13,7 +13,7 @@
 html{height:auto;}
 body{background-image:-webkit-linear-gradient(180deg, #FFFEF9, #EED6CC);background-image:linear-gradient(180deg,#FFFEF9,#EED6CC);}
 a:hover{text-decoration: underline;}
-#message{width:1200px;margin:80px auto 45px;overflow:hidden;padding:0 50px;}
+#message{width:1200px;margin:0 auto 45px;overflow:hidden;padding:0 50px;}
 #header{ background:#fff; border-radius:5px; line-height:48px; font-size:16px; font-weight:bold;  box-shadow:0 5px 7px rgba(0,0,0,0.2); color:#ed145b;}
 #footer{ height:30px; border-radius:5px; line-height:30px; text-align:center; position:relative;z-index:10; margin-top:40px}
 #footer a,#footer p{ display:inline-block;}
diff --git a/src/css/style-ios.css b/src/css/style-ios.css
@@ -711,7 +711,7 @@
 
   .continar {
     width: 100%;
-    margin: 1rem auto 0 !important;
+    margin: 0 auto;
     -webkit-transition: -webkit-transform 0.25s;
     transition: -webkit-transform 0.25s;
     transition: transform 0.25s;
@@ -3101,7 +3101,7 @@
     background: var(--color-theme);
     line-height: 1rem;
     text-align: center;
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     z-index: 97;
diff --git a/src/css/style-ipd.css b/src/css/style-ipd.css
@@ -691,7 +691,7 @@
   .continar {
     width: 100%;
     height: calc(100% - 1rem);
-    margin: 1.2rem auto 0 !important;
+    margin: 0 auto;
     overflow: hidden;
   }
 
@@ -3091,7 +3091,7 @@
     background: var(--color-theme);
     background-size: 100% 100%;
     text-align: center;
-    position: absolute;
+    position: sticky;
     top: 0;
     left: 0;
     z-index: 97;
diff --git a/src/css/style-pc.css b/src/css/style-pc.css
@@ -47,6 +47,8 @@
   }
 
   body {
+    width: 100%;
+    overflow-x: hidden;
     background: #f6f6f6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -57,9 +59,7 @@
     background-position-x: 0;
     background-position-y: 0;
     background-size: auto auto;
-    overflow-x: hidden;
     border-top: 1px solid transparent;
-    width: 100%;
     禁止文字选中
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -418,7 +418,7 @@
   #js_banner {
     width: 100%;
     height: 300px;
-    margin: 78px auto 0px;
+    margin: 0 auto;
     z-index: 10;
   }
 
@@ -434,10 +434,10 @@
     width: 100%;
     height: 64px;
     will-change: height;
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
     opacity: 1;
     z-index: 10;
     -webkit-transition: all 0.3s;
@@ -1454,7 +1454,7 @@
   /* 主题内容区域start */
   .continar {
     width: 1200px;
-    margin: 86px auto 25px;
+    margin: 0 auto 25px;
     min-height: calc(100% - 247px);
     overflow: hidden;
   }
diff --git a/src/index.php b/src/index.php
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-<meta name='generator' content='WordPress/Art_Blog v2022-05-29 20:35:05'>
+<meta name='generator' content='WordPress/Art_Blog v2022-05-29 22:25:13'>
 <title><?php $name = wp_title( '-', true, 'right' );
 		if ($name) {
 			echo $name . "&nbsp;-&nbsp;" . get_bloginfo('description');
diff --git a/src/js/main.js b/src/js/main.js
@@ -503,6 +503,7 @@
               $('body,html').animate({
                 scrollTop: 0
               }, 1200);
+              $header.css("z-index", "10");
               $aircraft.animate({
                 "top": "0",
                 "bottom": "auto",
@@ -582,10 +583,12 @@
         }
         if ($scrollTop <= 0) {
           $header.addClass("Top")
-          $header.removeClass("hover")
+          $header.removeClass("hover");
+          $header.css("z-index", "10");
         } else {
-          $header.removeClass("Top")
-          $header.addClass("hover")
+          $header.removeClass("Top");
+          $header.addClass("hover");
+          $header.css("z-index", "12");
         }
         // 侧边栏域跟随
         if ($(window).width() > 1200 && $roll_obj.length) {
diff --git a/src/page-time.php b/src/page-time.php
@@ -13,7 +13,7 @@
 html{height:auto;}
 body{background-image:-webkit-linear-gradient(180deg, #FFFEF9, #EED6CC);background-image:linear-gradient(180deg,#FFFEF9,#EED6CC);}
 a:hover{text-decoration: underline;}
-#message{width:1200px;margin:80px auto 45px;overflow:hidden;padding:0 50px;}
+#message{width:1200px;margin:0 auto 45px;overflow:hidden;padding:0 50px;}
 #header{ background:#fff; border-radius:5px; line-height:48px; font-size:16px; font-weight:bold;  box-shadow:0 5px 7px rgba(0,0,0,0.2); color:#ed145b;}
 #footer{ height:30px; border-radius:5px; line-height:30px; text-align:center; position:relative;z-index:10; margin-top:40px}
 #footer a,#footer p{ display:inline-block;}
