diff options
| author | 时光 <i@timemc.cn> | 2019-12-02 13:28:08 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-12-02 13:28:08 +0800 |
| commit | cb729be59dca4479d6510b8c45c9af625889960d (patch) | |
| tree | 2639ce1865b1c5e07cd6e93e4bdbe0975743caa8 | |
| parent | a2f38f9a3bb4e7075ca43436767f2413e72bda3c (diff) | |
添加滚动时标题栏的变色效果
使首页更沉浸。但留下了blur看个人喜好，我认为是对页面背景复杂时有帮助的，可以后期做个选项（逃
| -rw-r--r-- | assets/js/miracles.min.js | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js index 9e45b30..4617652 100644 --- a/assets/js/miracles.min.js +++ b/assets/js/miracles.min.js @@ -339,6 +339,7 @@ var toggleOptions = idGetEl("toggle-options-button"); var toggleOptionsMobile = idGetEl("toggle-options-mobile");
var alertCloseButton = idGetEl("alert-close");
var drawerButton = idGetEl("drawer-button");
+var navBar = idGetEl("navBar");
/* Add Listeners */
//返回顶部按钮
@@ -417,9 +418,26 @@ if(loadPjax = true) { panguLoad();
LazyLoad();
highlight();
+ navUpdate();
})();
-
+/**
+ * NavBar Scroll Change
+ */
+ var navBar_height = navBar.clientHeight
+ function navUpdate(){
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+ if (scrollTop > navBar_height) {
+ navBar.style.background = null;
+ navBar.style.boxShadow = null;
+ } else {
+ navBar.style.background = "transparent";
+ navBar.style.boxShadow = "none";
+ }
+ }
+ $(window).scroll(function() {
+ navUpdate();
+ })
/**
* Copyright
*/
-console.log("%c 🎉 Theme Miracles %c by Eltrac %c 仓库: https://github.com/BigCoke233/miracles %c 演示：https://guhub.cn","color: #fff; margin: 1em 0; padding: 5px 0; background: #29c75f;","margin: 1em 0; padding: 5px 0; background: #efefef;","display: block;margin-left:-0.5em;","display: block;margin-left:-0.5em;margin-bottom:1em");
\ No newline at end of file +console.log("%c 🎉 Theme Miracles %c by Eltrac %c 仓库: https://github.com/BigCoke233/miracles %c 演示：https://guhub.cn","color: #fff; margin: 1em 0; padding: 5px 0; background: #29c75f;","margin: 1em 0; padding: 5px 0; background: #efefef;","display: block;margin-left:-0.5em;","display: block;margin-left:-0.5em;margin-bottom:1em");
|