Question

对于不支持固定位置的移动浏览器，我假设移动网站上的页脚固定位置。（iOS 5之前的iOS，2.2之前的Andriod等）

这是我正在使用的JQuery代码，它运行良好并且做我想要的：

function changeFooterPosition() {   
  $('.not-fixed').css('top', window.innerHeight + window.scrollY - 56 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

这样有效。

我的问题是，我想为它添加一点延迟，并让页脚淡入视图，而不是在每个小滚动后快速捕捉。我环顾四周，找到了以下可以使用的方法，但我不确定它们是否正确，或者将它们添加到上面的js中。

.delay(1000).fadeTo('slow', 1)

我知道JQuery Mobile中存在这个功能，但我不想仅仅使用整个JQuery Mobile。

提前致谢。

Answer 1

尝试使用动画功能http://api.jquery.com/animate/

这不会褪色，而应该顺利移动。

function changeFooterPosition() {   
  $('.not-fixed').animate({'top': window.innerHeight + window.scrollY - 56 + "px"}, 2000);
}

$(document).bind('scroll', changeFooterPosition);

Answer 2

更改

$(document).bind('scroll', function() {
  changeFooterPosition();
});

要

$(document).bind('scroll', changeFooterPosition);

更改

$('.not-fixed').css('top', window.innerHeight + window.scrollY - 56 + "px");

到

var WantedSpeed = 2000;
$('.not-fixed').delay(1000).animate({
    top: window.innerHeight + window.scrollY - 56 + "px"
}, WantedSpeed, function() {
    // Animation complete.
})

Answer 3

你想要做的是限制滚动回调：

(function() {
  var scrollTimer = 0,
      $notFixed = $('.not-fixed');

  function changeFooterPosition() {   
    $notFixed.css('top', window.innerHeight + window.scrollY - 56 + "px").show(300);
  }

  $(document).bind('scroll', function() {
    $notFixed.hide();
    clearTimeout(scrollTimer);
    setTimeout(changeFooterPosition, 50);
  });
}());

如何在使用JQuery更改CSS时添加淡入淡出效果

3 个答案: