Question

我正在尝试为我的背景图像制作一个简单的视差效果，一切似乎都在工作，但背景图像在第一次滚动时跳转然后它可以工作！我似乎无法弄清楚它为什么继续跳跃，实时预览：http://loai.directory/gallery

HTML：

<div class="topSection parallax">
         <div class="content">
         </div>
      </div>

CSS：

#page {
   background-color: #3F8AE4;
   padding-top: 80px;
   text-align: left;
}

   /*Wrappers*/
   .wrapper {
      background-color: #ffffff;
   }

   .wrapper.A {
      background-color: #EDEDED;
      border-top: 1px solid rgba(0,0,0,0.1);
      border-bottom: 1px solid rgba(0,0,0,0.1);
   }

      /*Content Container*/
      .content {
         width: 1024px;
         padding: 50px 20px;
         margin: auto;
         overflow: hidden;
         position: relative;
      }

   /*Top Section*/
   .topSection {
      color: #fff;
      background-color: #3F8AE4;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 10px 0;
   }

.parallax {
   background: url(../images/backgruond.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   padding: 150px 0;
}

JS：

// Y axis scroll speed
var velocity = 0.5;

function update(){ 
    var pos = $(window).scrollTop(); 
    $('.topSection').each(function() { 
        var $element = $(this);
        // subtract some from the height b/c of the padding
        var height = $element.height()-0;
        $(this).css('background-position', '50%' + Math.round((height - pos) * velocity) + 'px'); 
    }); 
};

$(window).bind('scroll', update);

Answer 1

您的background-position被默认CSS设置为center center，但是一旦您开始滚动，它就会设置为50% 50px ...所以跳转来自垂直位置从居中变为计算。

你可以通过两种方式来解决这个问题，或者只是将你的初始css设置为：

background: url(../images/backgruond.jpg) no-repeat 50% 50px fixed;

因为您知道在开始滚动时它设置的位置

或者，除了滚动之外，只需在页面加载上调用update()函数，因此可以立即计算位置。

例如：

$(window).bind('scroll', update);
update();

背景图像在第一个滚动上跳跃

1 个答案: