Question

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

我想模仿这种效果。我最近看到它在网络上使用了很多，但我从未见过如何创建它的教程。

任何人碰巧都有一些指示或者有关重建这种效果的教程吗？

Answer 1

它被称为视差滚动。您可以使用skrollr.js执行此类操作并a great tutorial

Answer 2

有很多关于粘贴标题的示例和教程，

Google搜索粘贴标题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');
}
}

当我滚动时，如何在标题div上滑动内容div？

2 个答案: