使用对齐文档拆分屏幕布局

Question

我正在寻找一种方法来重新创建http://www.wandaprint.com的效果，就像滚动两种方式和快照一样，以保持内容完美契合。

我发现了这个

http://jsfiddle.net/licinio/R2m9S/

• 使用垂直导航。

  (function ($) {
  var top = 0;
  
  $(document).ready(function () {
  var contentHeight = $('.right').height(),
      contents = $('.right > .content').length;
  
  top = (0 - (contentHeight * (contents - 1)));
  
  $('.right').css('top', top + 'px');
  });
  
  $(window).resize(function () {
  var contentHeight = $('.right').height(),
      contents = $('.right > .content').length;
  
  top = (0 - (contentHeight * (contents - 1)));
  
  $('.right').css('top', (top + $(window).scrollTop()) + 'px');
  });
  
  $(window).scroll(function () {
  $('.right').css('top', (top + $(window).scrollTop()) + 'px');
  });
  
  })(jQuery);
  

我已经尝试了几个插件--jquery-panelsnap，Scrollsnap和SnapScroll - 但我无法让它工作。

你现在已经意识到，我不是js的专家，但我非常想学习。

提前感谢您提供的任何帮助。 ：）

Answer 1

我正在寻找类似的东西而且我找不到任何可以做的事情，所以我在几天前创建了一个具有相同功能的插件。 它被称为multiScroll.js。

• Demo site
• Github repository
• Blog entry

它适用于触控设备以及旧版浏览器，例如IE 8。