当我滚动时，如何在标题div上制作内容div幻灯片？

Question

一个例子，http://www.laravel.com

我想模仿这种效果。我已经看到它最近在网络上使用了很多，但我从来没有见过一篇关于如何创建它的教程。

任何碰巧有一些指令或可能是教程重新创建这种效果？

Answer 1

它被称为视差滚动。你可以用skrollr.js做这样的事情。
而a great tutorial

Answer 2

有大量的实例和教程粘头，对于粘性头http://codepen.io/senff/pen/ayGvD

// Create a clone of the menu, right next to original. 
    $('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); 

scrollIntervalID = setInterval(stickIt, 10); 


function stickIt() { 

var orgElementPos = $('.original').offset(); 
orgElementTop = orgElementPos.top;    

if ($(window).scrollTop() >= (orgElementTop)) { 
    // scrolled past the original position; now only show the cloned, sticky element. 

    // Cloned element should always have same left position and width as original element.  
    orgElement = $('.original'); 
    coordsOrgElement = orgElement.offset(); 
    leftOrgElement = coordsOrgElement.left; 
    widthOrgElement = orgElement.width(); 

    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show(); 
    $('.original').css('visibility','hidden'); 
} else { 
    // not scrolled past the menu; only show the original menu. 
    $('.cloned').hide(); 
    $('.original').css('visibility','visible'); 
} 
}