javascript - 返回顶部按钮和页脚(定位)

Question

我刚刚在我的网站上添加了一个“返回顶部”按钮。

HTML:

<div class="scroll-top scroll-is-not-visible">
  <a href="#0"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
</div>
<footer class="site-footer">
 ...
</footer>

CSS:

.scroll-top{
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-is-not-visible{
  visibility: hidden
}
.scroll-is-visible{
  visibility: visible
  opacity: 1
}
.scroll-fade-out{
  opacity: .5
}

不同的类由 jQuery 添加或删除。一切正常，但如果我完全向下滚动，按钮(逻辑上)重叠页脚并将文本隐藏在它后面。

我的问题是，只要页脚不在视口(viewport)中，我如何编辑我的代码以在定义的位置显示按钮，并且一旦页脚进入视口(viewport)，按钮应保持在页脚容器上方 50px .因此，如果页脚在视口(viewport)中，按钮应随内容滚动。

不知道这样理解对不对，有不明白的地方欢迎评论。

提前致谢!

Answer 1

使用 jQuery，您可以确定窗口滚动中按钮遮挡页脚的点，然后编写 javascript/jquery 来解决这个问题。我在这里做了一些事情:http://codepen.io/babzcraig/pen/QNJrye你可以玩。代码看起来像这样:

HTML:

<div class="container">
  <h2>Here's Your Content... bla bla bla<h2>
  <button id="btn">Click Me</button>
</div>
<div class = "footer">
  <p>This is Your Footer</p>
</div>

CSS:

.container {
  background-color: pink;
  height: 1000px;
  margin-bottom: 0px;
}

#btn {
  margin-left: 100px;
  width: 50px;
  height: 50px;
}

.footer {
  background-color: yellow;
  margin-top: 0px;
  height: 200px;
}

p {
  padding: 30px;
  font-family: roboto;
}

JS:

$(document).ready(function() {

  function getScroll() {
    var btnScroll = $(window).scrollTop();
    console.log(btnScroll);
    if (btnScroll < 450) {
      $("#btn").css({"position":"fixed","margin-top": "450px"})
    } else {
      $("#btn").animate({"position":"fixed","margin-top": "200px"}, 400)
    }

  }

  setInterval(function(){getScroll();}, 500);
});

根据您的特定设计，您的数字会有所不同，但如果您稍微花点时间在这些数字上，就会发现有用的方法。我在 else block 中使用了 .animate() 方法，这样您就可以比仅使用 css 声明获得更平滑的过渡。如果这有帮助，请告诉我。