Question

嘿伙计们我遇到了一个小问题。我正在尝试做一个演示网站，并希望制作一个元素，好像它漂浮在空中。我已经设法让这个东西工作（对于标题部分），但是当你到达元素时，它已经离开了原始位置。目前我的javascript正在计算元素和页面顶部之间的距离。

$(document).ready(function() {

 $(window).scroll(function () { 

   $('.parallax-element-container').css({

     'bottom' : -($(this).scrollTop()/8)+"px"

      }); 

   });

 });

我已将问题上传到codepen以便给您一个想法，欢迎提出任何建议。

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

Answer 1

您可以等到窗口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"
      });
    }
  });

});

视差效果延迟直到部分到达视口

1 个答案: