From 22f340e62acfdb22b749f62c35356e4238d045c8 Mon Sep 17 00:00:00 2001
From: xchenhao <chenhao_apple@163.com>
Date: Fri, 4 Oct 2019 23:47:59 +0800
Subject: [PATCH] optimize footer

---
 frontend/views/layouts/article.php |  2 +-
 frontend/views/layouts/footer.php  | 43 ++++++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/frontend/views/layouts/article.php b/frontend/views/layouts/article.php
index 2f54b1c..9af191b 100644
--- a/frontend/views/layouts/article.php
+++ b/frontend/views/layouts/article.php
@@ -19,7 +19,7 @@
 <!--body-->
 <?php $this->beginBody() ?>
 <?= $content ?>
-<div id="toTop" class="back-top" onclick="window.scrollTo(0,0);return false;"></div>
+<div id="toTop" class="back-top" style="bottom: 170px" onclick="window.scrollTo(0,0);return false;"></div>
 <?php $this->endBody() ?>
 <!--body-->
 
diff --git a/frontend/views/layouts/footer.php b/frontend/views/layouts/footer.php
index 25c720d..1057308 100644
--- a/frontend/views/layouts/footer.php
+++ b/frontend/views/layouts/footer.php
@@ -13,11 +13,28 @@ use common\models\Links;
     width: 70%;
   }
   .about a {
+      white-space: nowrap;
     /*background: pink;*/
   }
+  .blank-box {
+    margin-top: 200px;
+  }
+  footer {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      z-index: 300;
+      /*transition: opacity 3s;*/
+  }
+  .item-hide {
+    /*display: none;*/
+      opacity: 0;
+      /*height: 0;*/
+  }
 </style>
 
-<!--<footer style="position: fixed; bottom: 0;">-->
+<div class="blank-box"></div>
+<footer id="myfooter">
     <div class="about">
         <div class="links">
             <?php
@@ -40,4 +57,26 @@ use common\models\Links;
         </a>
     </div>
     <div id="bg_overlay" style="display:none;"></div>
-<!--</footer>-->
\ No newline at end of file
+</footer>
+<script>
+  $(function () {
+      // 一加载进来首页判断 footer 高度是否需要隐藏
+      // FIXME: 换成 css 方式来判断
+       checkFooterVisible()
+      $(window).scroll(function(){
+          checkFooterVisible()
+      });
+      function checkFooterVisible() {
+          var scrollTop = $(this).scrollTop();
+          var scrollHeight = $(document).height();
+          var windowHeight = $(this).height();
+          if(scrollTop + windowHeight >= scrollHeight - 160){
+              //alert("已经到最底部了！");
+              $('#myfooter').removeClass('item-hide')
+          } else {
+              $('#myfooter').addClass('item-hide')
+          }
+      }
+  })
+
+</script>
\ No newline at end of file
-- 
GitLab