僅限Chrome瀏覽器：使用固定位置滾動功能滾動覆蓋div的問題

Question

基於此回答Overlay divs on scroll我試圖做同樣的效果。

當你滾動的部分被覆蓋在同一個地方 - 一個堆積在下一個。

在Firefox上 - IE瀏覽器工作正常，但在Chrome上（最新版本 - 版本31.0.1650.63米），當您滾動時，下一張幻燈片開始顯示正在重疊的部分內容被反彈。

邏輯：

當下一幻燈片/部分即將設置position:fixed;到將要重疊的部分。

基本HTML

<section class="section"> 
    <div class="section-inner"> 
     <div class="table-cell"> 
      <div class="container clearfix"> 
       //conten goes here with img etc. 
      </div> 
     </div> 
     <img src="imgsrc" class="secondary-background-image"> 
    </div> 
</section> 

的CSS：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    overflow-x: hidden; 
} 
.section { 
    position: relative; 
    z-index: 5; 
    background: #FFFFFF; 
} 
.section-fixed { 
    z-index: 1; 
} 
.section-inner { 
    width: 100%; 
    height: inherit; 
    display: table; 
} 
.section-fixed .section-inner { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 
.table-cell { 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    height: inherit; 
} 
.section .secondary-background-image { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
.container { 
    position: relative; 
    width: 700px; 
    margin: 0 auto; 
    padding: 0; 
} 
.clearfix:before, .clearfix:after { 
    content:" "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 

基礎JS：

$(function() { 

    // Set up vars 
    var _window = $(window), 
     panels = $('.section'), 
     winH = _window.height(); 
     panelsY = []; 


    // Cache position of each panel 
    $.each(panels, function(i, el) { 
     $(this).css('height', winH); 
     panelsY.push(panels.eq(i).offset().top); 
    }); 

    // Bind our function to window scroll 
    _window.bind('scroll', function() { 
     updateWindow(); 
    }); 

    // Update the window 
    function updateWindow() { 
     var y = _window.scrollTop(); 

     // Loop through our panel positions 
     for (i = 0, l = panels.length; i < l; i++) { 
      /* 
       Firstly, we break if we're checking our last panel, 
       otherwise we compare if he y position is in between 
       two panels 
      */ 
      if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) { 
       break; 
      } 
     }; 

     // Update classes 
     panels.not(':eq(' + i + ')').removeClass('section-fixed'); 
     panels.eq(i).addClass('section-fixed'); 
    }; 

}); 

用一個簡單的文本內容的工作文件，http://jsfiddle.net/amustill/wQQEM/

的jsfiddle文件在chrome中工作，因爲佈局非常簡單，divs沒有屏幕高度。在我的網站，我猜是因爲divs需要屏幕的高度，而且我有很多圖像，文本等問題發生。

因此，問題發生在該部分採用類部分固定並且部分內部的位置被設置爲固定的時刻。

編輯

我把nicescroll.js也使滾動更加順暢。問題仍然存在，但「平滑」。

Answer 1

這可以確保所有的位置都在地方，直到不運行的用戶開始滾動後的JavaScript以發生的事情是，他們開始滾動，然後。 javascript運行，把一切都放回原處，這就是創建彈跳效果的原因。

要解決這個問題，只需確保滾動事件在附加滾動事件後立即運行，然後用戶有機會滾動自己。

這真的是很簡單的：

JS：

/* ... */ 

// Bind our function to window scroll 
_window.bind('scroll', function() { 
    updateWindow(); 
}); 

// Call the event to make sure everything is set 
_window.scroll(); 

你很可能只是運行updateWindow（）函數，但我卻沒有能夠測試作爲函數不當看到您的網站時暴露。

編輯：

看起來你可能是說比，與第一個部分出現反彈更多。當我滾動瀏覽時，我幾乎感覺不到任何其他部分的彈跳，而且我懷疑你的用戶是否也會這樣做。但是，如果這是一個問題，它看起來是由於在chrome中觸發scroll（）事件導致一些低效率而導致的。這個答案可能會對你有所幫助：https://stackoverflow.com/a/11039468/1824527

Answer 2

你試圖用「固定格」實現的內容叫做parallax scrolling。疊加的容器有目的地實現了真正的外觀，所以你添加背景圖像後，你的小提琴就完美了。

如果你不想要這個效果，只需更改：

 .panel-fixed .panel-inner { 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 2; 
     } 

這樣：

 .panel-fixed .panel-inner { 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 2; 
     } 

Answer 3

我正在做一個基本的demo。你的設計很有趣（：

Knee's Fiddle