jquery - 页面右下角的上滑框

Question

我正在寻找在网页右下角创建上滑框的具体说明。例如 Olark、qualroo

搜索结果非常不具体。点点滴滴，但没有什么简单明了。

要求

• 该框应在折叠状态下可见，并在用户访问页面几秒钟后向上滑动以显示表单。

• 最好是一些可以粘贴在现有网站页脚中的 javascript。

谢谢你。

Answer 1

用css创建你的盒子，并将它的位置固定在右下角。然后使用 jquery 你可以检查，当用户滚动到页面底部时，做一些事情。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    // put code here to animate height and/or another css property
    // don't forget to hide box when scrolling up.
  }
});

不要忘记将你的盒子推到窗外的高度。例如，如果您的框高 200 像素，那么您将给它 -200 像素，而不是底部 0。