部分到达视口之前的视差效果延迟

Question

我正在尝试做一个演示网站，想制作一个元素，就好像它漂浮在空中一样。我已经设法使它正常工作（对于 header 部分），但是当您到达该元素时，它已经偏离其原始位置太远了。目前我的 javascript 正在计算元素与页面顶部之间的距离。

$(document).ready(function() {
 
 $(window).scroll(function () { 
  
   $('.parallax-element-container').css({
    
     'bottom' : -($(this).scrollTop()/8)+"px"
     
      }); 
 
   });
   
 });

我已经把issue上传到codepen给大家提意见了，欢迎大家提出建议。

http://codepen.io/marolt/details/PqNPYj/

Answer 1

您可以等到 window scrollTop 更接近您的目标，然后开始移动它。

示例：http://codepen.io/anon/pen/aONWEP

$(document).ready(function() {
  var parallaxTop = $('.parallax-element-container').offset().top;
  var parallaxStart = parallaxTop * .9;

  $(window).scroll(function() {
    if ($(this).scrollTop() >= parallaxStart) {
      $('.parallax-element-container').css({
        'bottom': -(($(this).scrollTop() - parallaxStart) / 2) + "px"
      });
    }
  });

});

部分到达视口之前的视差效果延迟

Parallax effect delay until section reaches viewport

html

javascript

css

jquery

parallax