当滚动条到达某个位置时动画 div答案

【问题标题】：Animate div when the scrollbar reaches certain position当滚动条到达某个位置时动画 div
【发布时间】：2015-05-13 04:00:46
【问题描述】：

我的网站目前在一个滚动布局中包含三个部分。带有两个部分的标题：关于和联系人（这些是 div 框），当您滚动到页面底部时会显示动画。我想要实现的是当用户向下滚动并点击每个（div 框）部分的底部而不是网站底部时发生动画。

我认为我需要实现 .offset() 函数但不确定这是否正确？

任何帮助将不胜感激。

CSS

.header {
  display: none;
  position: relative;
  left: 0px;
  right: 0px;
  top: 500px;
  height: 80px;
  width: 100%;
  background:red;
  color: #fff;
  text-align: center;
}

var header = $('.header'),
extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.

header.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {

var scrolledLength = ( $(window).height() +extra) + $(window).scrollTop(),
   documentHeight =  $(document).height();

console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )

if( scrolledLength >= documentHeight ) {

   header
      .addClass('top')
      .stop().animate({ top: '20', opacity: '1' }, 800);
}
else if ( scrolledLength <= documentHeight && header.hasClass('top') ) {           
    header
       .removeClass('top')
       .stop().animate({ top: '500', opacity: '0' }, 800);
  } 
});

小提琴 - http://jsfiddle.net/SFPpf/480/

【问题讨论】：

由于 stackoverflow 社区说询问指向 github repo 的链接是否不起作用，我将在此处发布链接。这是否有效：github.com/FREE-FROM-CMS/load_more engine.js 顶部的变量之一可能是您需要使用的，但如果不是，您可以针对内容 div 执行鼠标悬停。
对不起，我不太确定我是否跟随.. 请原谅我，因为我只是新手，还在学习（慢慢哈）@php_purest
你在做什么类型的动画？
它做你想做的事了吗？
您将在我创建的 JS Fiddle 中看到我试图实现的动画。您会注意到它在用户滚动到文档底部后开始。 - 一旦用户滚动到名为“fillWindow”而不是整个文档的 div 框的底部，我试图让动画开始。-至于动画，名为“header”的 div 框沿 y 向上动画-axis 并从 0 淡入到 100%。然后一旦用户离开页面中的点，就会反转。@php_purest

标签： javascript jquery html css scroll

【解决方案1】：

看起来在这种情况下 position() 会更好。 position 方法是相对于文档的，而 offset 是相对于父元素的。它返回一个具有“top”和“left”属性的对象。它一次只能返回一个元素的位置，因此对于第一个 div，您需要使用 first() 和 eq() 来获取特定的元素。

.fillWindow 的底部将是它的垂直位置 + 它的高度。

var $fillWindow = $(".fillWindow").first(), // or eq() for others
    position = $fillWindow.position(),
    height = $fillWindow.height();
    //bottom = position.top + height;

scrollTop() 现在可用于检查用户何时滚动过 .fillWindow。

if ( $(window).scrollTop() >= position.top ) {
    // do the animation here
} else {
    // do something else
}

编辑：我刚刚发现我的错误。它应该是 $(window).scrollTop()。您还应该测试 scrollTop 是否位于 .fillWindow 的顶部。

【讨论】：

嗨，Alex，感谢您的意见。我已将建议的代码插入到 JS Fiddle 中，不幸的是我无法让它工作？ - 这是更新的 JS Fiddle - jsfiddle.net/SFPpf/481