Как сделать так, чтобы 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});
        }
    }
}

Вы можете увидеть это в действии здесь .