一個例子,http://www.laravel.com當我滾動時,如何在標題div上製作內容div幻燈片?
我想模仿這種效果。我已經看到它最近在網絡上使用了很多,但我從來沒有見過一篇關於如何創建它的教程。
任何碰巧有一些指令或可能是教程重新創建這種效果?
一個例子,http://www.laravel.com當我滾動時,如何在標題div上製作內容div幻燈片?
我想模仿這種效果。我已經看到它最近在網絡上使用了很多,但我從來沒有見過一篇關於如何創建它的教程。
任何碰巧有一些指令或可能是教程重新創建這種效果?
它被稱爲視差滾動。你可以用skrollr.js做這樣的事情。
而a great tutorial
有大量的實例和教程粘頭,對於粘性頭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');
}
}
錯誤..多數民衆贊成在多數民衆贊成在想什麼,我猜.. – Azrael 2014-09-29 14:05:43
在谷歌搜索
首先聯繫你想要一個粘頭? – 2014-09-29 13:53:02