Question

在滚动位置动画div位置的最佳方法是什么？基本上，当你到达页面上的某个点时......一个固定的元素会动画起来。

我在下面列出了我现在所拥有的......但它有点慢，似乎向上滑动......慢慢......中途......然后完成。有什么想法吗？

var shareHeight = $('.related-share-container').height();
$('.related-share-container').css('bottom',-shareHeight);
$(window).scroll(function() {   
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
        $('.related-share-container').stop().animate({ bottom: 0 }, 500);
     } else {
         $('.related-share-container').stop().animate({ bottom: -shareHeight }, 500);
     }
});

奖励更新

这是我正在开发的开发网站：http://goo.gl/KcFdE6如您所见，如果您滚动到底部并停止，它会相当好地滑动，但是，如果您继续滚动...它正在交互使用动画，您可以进行真正的跳跃/慢速过渡。有什么想法吗？

Answer 1

每个滚动动作都会发生原因，前一个动画停止并且新动作开始，这比前一动画慢，因为它与动画的距离较短。因此，您需要在代码中使用一些标志来防止一次又一次地触发相同的动画。

修改JS：

这里我使用done类作为标志。

var shareHeight = $('.related-share-container').height();
$('.related-share-container').css('bottom',-shareHeight);
$(window).scroll(function() {   
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
         if(!$('.related-share-container').hasClass('done'))
             $('.related-share-container').addClass('done').stop().animate({ bottom: 0 }, 500);
     } else {
         if($('.related-share-container').hasClass('done'))
             $('.related-share-container').removeClass('done').stop().animate({ bottom: -shareHeight }, 500);
     }
});

Answer 2

如果我理解正确的话，你想要一个位于页面某处的元素在视口的特定位置上滚动。

检查这个小提琴：http://jsfiddle.net/6bZab/11/ JS：

var oldElemBottom;

function isScrolledIntoView(elem) {
  var win = $(window),
    marginBot = 20,
    docViewTop = $(window).scrollTop(),
    docViewBottom = docViewTop + $(window).height(),
    elemTop = $(elem).offset().top,
    elemBottom = elemTop + $(elem).height();

  if (typeof oldElemBottom !== 'undefined'){
    elemBottom = oldElemBottom;
  }
  if ((win.scrollTop() + win.height()  - marginBot) >= elemBottom){
    oldElemBottom = elemBottom;    
    return true
  } else {
    return false
  };
}

CSS：

#container {
  width: 100%;
  height: 1000px;
}

#elem {
  width:80px;
  height:50px;
  background:#333;
  color:#FFF;
  text-align:center;
  right: 0;
}

.first{
  background-color: green;
  height: 1000px;
}

.absolute_pos{
  position: absolute;
  top: 600px;    
}

只要viewport + marginBot的底部通过元素，元素就会滚动。之后它会被修复，直到它再次上升为止。

Answer 3

假设您提到iffy动画而不是实际的div放置，问题是每次滚动时都会执行js代码，即使您已经动画了。这会导致您停止动画并重新启动它。这是您所看到的缓慢而滞后的动画效果的原因。

你需要做的是跟踪你是否在动画并做出反应，以便动画有机会完成。

//...
var isAnimating = false;

$(this).bind('scroll', function() {
    //jQuery does have a :animated selector as well that can handle this
    if(!isAnimating){
        isAnimating = true;
        var y = $(this).outerHeight() + api.getContentPositionY() + 600 >= api.getContentHeight();

        if (y) {
            $('.related-share-container').animate({ 'margin-bottom': 0 }, { queue: false, duration: 300 }, 'slow', function(){ isAnimating = false; });
        } else {
            $('.related-share-container').animate({ 'margin-bottom': -shareHeight - 30 }, { queue: false, duration: 300 }, 'slow', function(){ isAnimating = false; });
        }
    }
});

警告！代码未经过测试但是是所需代码的近似值您需要考虑的是，如果它们向上滚动，则可以停止动画并反转方向。

Answer 4

首先检查一下 demo

<强> CSS

.related-share-container{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    padding: 15px 0;
    font-size: 16px;
    display:none;
}

下载animate.css文件并链接到您的文件

<强> JS

$(window).scroll(function(e) {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
            $('.related-share-container').removeClass('rotateOutUpLeft').addClass('animated rotateInUpLeft').show();
        } else {
            $('.related-share-container').removeClass('rotateInUpLeft').addClass('rotateOutUpLeft');
        }
    });

它的工作完美。不要忘记下载animate.css文件并添加到您的网站。你可以选择动画效果。

Answer 5

你有2个选项，两个都很好，但后者更好：

一个。使用去抖动功能 - 换句话说，你想要限制滚动侦听器，使其只在每X毫秒发生一次，所以如果有人在中间滚动，它就不会发生。

lodash等库提供了_.debounce（fn，time）;

如果您不使用图书馆，可以这样实现（我使用您当前网站的代码）：

        var shareHeight = $('.related-share-container').height();
        $('.related-share-container').css('height',shareHeight);
        $('.project-content-container').css('margin-bottom',shareHeight);
        $('.related-share-container').css('margin-bottom',-shareHeight - 30);
        var timeout,
            elem = $(this);
        elem.bind('scroll', function() {
            clearTimeout(timeout);
            timeout = setTimeout(function(){
                var y = elem.outerHeight() + api.getContentPositionY() + 600 >= api.getContentHeight();
                if (y) {
                    $('.related-share-container').stop(true).animate({ 'margin-bottom': 0 }, { queue: false, duration: 300 });
                } else {
                    $('.related-share-container').stop(true).animate({ 'margin-bottom': -shareHeight - 30 }, { queue: false, duration: 300 });
                }
            }, 50); //50ms debounce time
        });

B中。逐步动画 - 换句话说，每次调用动画函数时，它都不会为容器的完整大小设置动画，但只会为滚动的量（或设置的步长）设置动画。这实际上是一个更好的解决方案，因为目前，如果有人向下滚动并且巨大的页脚弹出，则几乎不可能向上滚动。诸如tween.js之类的库使这很容易。

Answer 6

我将使用css过渡而不是jquery animate，如下所示，这样您就不必担心动画队列了。

（使用css，您甚至可以使用hardware acceleration）

CSS

.element-to-animate {
 /*your style rules*/
 transform: translate3d(0, 0, 0);
 transition:height .5s linear;
}
.hide {
 height:0 !important;
}

脚本：

var sliderTop = $(window).height() - 150;
$(window).scroll(function () {
 var scrollTop = $(window).scrollTop();
 if (scrollTop > sliderTop) {
    if ($('.overlay').hasClass('hide'))
      $('.overlay').removeClass('hide');
 } else {
    if (!$('.overlay').hasClass('hide'))
       $('.overlay').addClass('hide');
 }
});

在滚动位置上设置div的位置

6 个答案:

Demo