Question

我的网站目前在单个滚动布局中有三个部分。标题为两部分：关于＆amp;联系（这些是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;
}

JS

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/

Answer 1

在这种情况下，看起来position（）会更好。 position方法相对于文档而offset是相对于父元素。它返回一个具有属性＆＃34; top＆＃34;的对象。和＆＃34;离开＆＃34;。它一次只能返回一个元素的位置，因此对于第一个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（）。您还应该测试位于.fillWindow顶部的scrollTop。

滚动条到达特定位置时动画div

1 个答案: