Question

这是一个曾经在不同变体中提出的问题，我试图使用代码，但它不适合我。我希望我的页脚在到达底部之前稍微向上滚动时进行动画处理，并在向上滚动时关闭。就像在这个网站一样 - 你会看到你是否一直向下滚动。 http://www.pronto.co.il

这是我的代码：

的CSS：

body, html { height: 1000px; }

HTML：

<button id="buttonTest">try me</button>
<div id="footer" style="display: none;"><img src="pics/try_me_1.png" ></div>

我正在尝试保留jquery代码，但我还不清楚它到底是如何工作的。所以这是答案的链接 - 我接受了它并使用animate（）而不是警报。 Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up

会帮助我很多。非常感谢你

Answer 1

您可以添加/删除给定的课程

var footer = document.querySelector("#footer");
window.onscroll = function(event) {
    ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) ? footer.classList.add("visible") : footer.classList.remove("visible")
};

这是你的css

#footer{
  position: fixed;
  bottom: 0;
  overflow:  hidden;
  height: 0;
  transition: height .3s ease
}
#footer.visible{
  height: 100px;/*what ever you want*/
}

Answer 2

由于评论显示您提供的链接上没有动画，但基于链接问题很简单，因为：

var isShowing = false;
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
        $('#footer').slideToggle();
        isShowing = true;
    } else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
        $('#footer').slideToggle();
        isShowing = false;
    }
});

body,
html {
  height: 1000px;
}
#footer {
  height: 150px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background:black;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="buttonTest">try me</button>
<div id="footer"></div>

页脚在滚动时触摸动画并触摸底部，向上滚动时动画下来

2 个答案: