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添加或删除了不同的类。一切都运行良好，但如果我完全向下滚动，按钮（逻辑上）重叠页脚并隐藏它背后的文本。

我的问题是，只要页脚不在视口中，我就可以编辑代码以在定义的位置显示按钮，只要页脚进入视口，按钮就应该保持在页脚容器上方50px 。因此，如果页脚位于视口中，则该按钮应与内容一起滚动。

我不知道这是否可以理解，所以如果你不理解我的意思，请发表评论。

提前致谢！

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块中使用了.animate()方法，这样您只需使用css声明即可获得更平滑的过渡。如果这有帮助，请告诉我。

回到顶部的按钮和页脚（定位）

1 个答案: