Question

我的网站底部有一个按钮，我希望它不可见，直到页面滚动到底部。滚动到底部后，按钮会动画显示（不透明度/可见光动画为1）

我已经在网站上安装了skrollr用于其他元素，但不确定我是否可以使用滚动条来完成此效果。

基本上，它是按钮上的过渡/动画，有延迟。只有在网站到达底部时才会激活。

HTML

<footer>

    <div class="footer-btn"><a href="...">Miss something?</a></div>

       ...

CSS

.footer-btn a  {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 25px 30px;
  margin: 20px;
  border: 3px solid #fff;
}

Answer 1

您可以这样做：

将CSS更改为：

.footer-btn a  {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 25px 30px;
    margin: 20px;
    border: 3px solid #fff;
}

将此信息作为javascript：

放在页面上

var isShown = false;

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        isShown = true;
        $('.footer-btn').fadeIn(500);
    }
});

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() < $(document).height() && isShown) {
        isShown = false;
        $('.footer-btn').fadeOut(500);
    }
})

Answer 2

您将需要javascript / jQuery。您可以尝试使用waypoint.js 这使得在页面中的某些点触发javascript事件变得容易！

var $footerbutton = $('.footer-btn a');
var waypoint = new Waypoint({
element: document.getElementById('#waypoint'),
handler: function() {
$footerbutton.css('opcaity',1);
}
 })

延迟视口位置上按钮的不透明度

2 个答案: