Как сделать 2+ коробки слайдами

Question

Я читал учебники из нескольких разных мест, таких как http://css-tricks.com/scrollfollow-sidebar/ или http://jqueryfordesigners.com/fixed-floating-elements/ и играл с ними, но, похоже, не понял, как бы я мог добавить больше, чем тот, скользящая коробка на странице. Есть предположения?

Answer 1

Мое предположение (из первой ссылки на пример) состоит в том, что вместо того, чтобы иметь только #sidebar, вы хотите иметь прокрутку еще одного элемента с окном (т. Е. Войти в детали пользователя).

Проще всего было бы добавить эту информацию в существующей прокрутке элемент:

<ul id="sidebar"> 
    <li id="user-details">Name: John Doe<br/>Email: john.doe@gmail.com</li> 
    <!-- remaining links here --> 
</ul> 

Однако, если вы хотите, чтобы прокрутить два элемента с окном:

<ul id="sidebar"> 
    <!-- sidebar links --> 
</ul> 
<ul id="user-details"> 
    <!-- user details --> 
</ul> 

Было бы просто вопрос оживления обоих их маржинальных вершин внутри обработчика событий $(window).scroll():

Редактировать

следующие свитки код #sidebar до тех пор, пока не достигнет 2000px из свитка, на котором указывают он останавливается и прокручивается #user-details, пока он не достигнет 4000px из свитка:

// constants for the scrolling 
var offsetSidebar = $("#sidebar").offset(); 
var offsetUserDetails = $("#user-details").offset(); 

// on scroll of window 
$(window).scroll(function() { 
    scrollElement($("#sidebar"), offsetSidebar, 2000); 
    scrollElement($("#user-details"), offsetUserDetails, 4000); 
}); 

// handle the scrolling 
function scrollElement(elem, offset, boundary){ 
    var currOffset = elem.offset(); 
    if(currOffset.top < boundary && $(window).scrollTop() < boundary){ 
     if ($(window).scrollTop() > offset.top) { 
      elem.stop().animate({marginTop: $(window).scrollTop() - offset.top}); 
     } else { 
      elem.stop().animate({marginTop: 0}); 
     } 
    } 
} 

Вы можете увидеть его in action here.