背景大小的封面在背景位置切换为固定时跳跃

我正在制作视差/滚动时间轴项目，并遇到CSS3背景大小封面属性的问题。背景大小的封面在背景位置切换为固定时跳跃

在div具有以下属性：

background: url(../images/timeline/back-6.jpg) no-repeat top center black; 
background-size: cover; 
padding-top: 90px; 
height: 1855px; 
position: relative;

使用jQuery我背景附件切换到固定的。当我这样做时，背景图像会跳入“in”（意味着图像中经过屏幕边缘的部分现在可见）。这不是理想的结果。

在测试中，我可以切换div来使用背景大小：100％的覆盖，但它在滚动时会导致不同的垂直跳跃问题。

当我将背景切换到固定时，如何防止它跳进来的任何想法？（当我将背景设置为滚动时，它也发生在相反的情况）。

我遗憾的是无法链接到此代码的演示，因为页面尚未准备好部署。

来源

2012-12-12 Fernker

我有同样的问题，当设置background-size到cover或contain

经由@media设置一个固定的高度，例如在用于小屏幕防止背景图像跳动。我的测试后，我得出的结论，即跳跃设置background-attachment到fixed

将其设置为fixed后是由于组件的方位，该size由视口的大小，不包含元素计算background-image。这是跳跃的源泉，为什么设置一个固定的高度或宽度为background-size解决了这个问题。

来源

2013-07-08 12:25:30

我有同样的问题，这并没有为我工作。我将背景设置为覆盖（尽管我尝试使用固定值），如果我尝试将图像放大一点，屏幕仍然在滚动操作上跳下来。还有其他解决方案吗？ – CZorio

我在创建一个页面布局时遇到了同样的问题，我想使用scrollTo-Plugin等...... 页面布局分为两部分：背景图片左侧更改/滚动右侧的内容。所以我用来做一种jQuery插件来结合“背景位置：固定”和“背景大小：封面”。你只需要通过class/id定义元素来对齐背景图像。

不要抱怨代码。即时通讯相对较新的JavaScript/jQuery。但它的工作;）那里是：

function fixedResize() { 
    var targetEl = $('element where bg-images are in'); 
    var targetWidth = targetEl.width(); 
    var targetHeight = targetEl.height(); 
    var targetPosX = targetEl.offset().left; 
    var targetPosY = targetEl.offset().top; 
    var leftRatio = targetWidth/targetHeight; 
    //console.log('TargetWidth', targetWidth, 'TargetHeight', targetHeight, 'Offset', targetPosX, targetPosY, 'leftRatio', leftRatio); 
    targetEl.each(function(){ 

     var imgTarget = $(this); 
     var url = $(this).css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', ''); 
     var bgImg = $('<img />'); // make background-image as image tag for getting width and height of the image 
     imgTarget.css('background-attachment','fixed'); 
     bgImg.hide(); 
     bgImg.bind('load', function(){ 
      var imgHeight = $(this).height(); 
      var imgWidth = $(this).width(); 
      var imgRatio = imgWidth/imgHeight; 
      $(this).remove(); // remove img Tags again 

      // Calculate resize dimensions 
      if (imgRatio > leftRatio) { 
       var currentWidth = imgRatio * targetHeight; // image width after resize 
       var currentHeight = (currentWidth/imgWidth)*imgHeight; 
       var setToLeft = ((currentWidth - targetWidth)/2); 
       var imgPosX = targetPosX - setToLeft; 
       var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1; 
       var resizeImg = 'background-size: auto '+ targetHeight +'px;';     

       } else if (imgRatio < leftRatio){ 
        var currentWidth = targetWidth; 
        var currentHeight = (currentWidth/imgWidth)*imgHeight; 
        var imgPosX = targetPosX; 
        var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1; 
        var resizeImg = 'background-size: '+ targetWidth +'px auto;'; // resize background 
       } 
      imgTarget.attr('style','background-attachment: fixed; background-position: '+ imgPosX +'px '+ imgPosY +'px;' + resizeImg); 
      console.log('imgWidth', imgWidth, 'imgHeight', imgHeight, 'imgRatio', imgRatio, 'currentWidth', currentWidth, 'currentHeight', currentHeight, 'setToLeft', setToLeft); 
      console.log('imgPos', imgPosX, imgPosY, 'setToLeft', setToLeft, targetPosX); 

     }); 
     $(this).append(bgImg); 
     bgImg.attr('src', url); 

    }); 
} 
fixedResize(); // initiate function 

$(window).resize(function() { 
    fixedResize(); // initiate function for window resize (Fluid behavior) 
});

或 jsfiddle.net/rowphant/eXb6e/14/

来源

2013-10-22 13:42:45

背景大小的封面在背景位置切换为固定时跳跃

回答

相关问题