Привязать к началу Div/элемента при прокрутке

Может ли кто-нибудь порекомендовать «лучший» подход для привязки полосы прокрутки к верхней части элемента при прокрутке страницы вниз?

Например, если бы мой макет был следующим:

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

Если пользователь просматривал первый раздел и начал просмотр вниз, а второй раздел начал занимать часть области просмотра браузера, я бы хотел, чтобы браузер автоматически привязывался к верхней части следующего div.

Я знаком с .scroll() и .scrollTop, но немного не уверен, куда идти дальше.


scroll jquery scrolltop
person cqde    schedule 26.07.2012    source источник
comment
Итак, вы в основном хотите, чтобы следующий <div> прыгал в верхнюю часть экрана, как только он попадал в окно просмотра? Как долго он должен оставаться там (подумайте о том, что пользователь продолжает прокручивать и через мгновение понимает, что контент переместился в верхнюю часть области просмотра). И что произойдет, если экран пользователя выше 600 пикселей, так как всегда будут видны два <div>?   -  person insertusernamehere    schedule 27.07.2012

Ответы (3)


arrow_upward
8
arrow_downward

вы можете проверить, находится ли элемент в wiewport с помощью этой функции isScrolledIntoView, созданной @Скотт Даудинг,

А вот пример,

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000)
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}​

ДЕМО

person Okan Kocyigit    schedule 26.07.2012
comment
да, потому что isScrolledIntoView возвращает true, если элемент в wiewport, я изменил функцию, теперь она работает, как вы говорите. - person Okan Kocyigit; 27.07.2012
comment
Потрясающий. Я предполагаю, что единственное, что вызывает некоторые ошибки, - это когда в окне просмотра отображается более одного div, что заставляет JS добавлять/удалять класс выделения несколько раз для разных присутствующих div. Я мог бы попытаться найти способ проверить, имеет ли div большую часть оконной недвижимости или, может быть, каждый div эластичный, со 100% шириной и высотой? - person cqde; 27.07.2012

arrow_upward
0
arrow_downward

То, что вы могли бы сделать, установлено

body {
overflow:hidden
}

и иметь контроль над взаимодействием с пользователем, скажем, у вас есть меню, если пользователь выбирает раздел в меню, которое вы только что анимировали с помощью scrollTop для перенаправления в раздел.

Другое решение, поскольку у вас есть определенная высота, равная 600 пикселей, вы можете рассчитать с помощью scrollTop и прокрутить, где пользователь находится в документе, что-то вроде этого...

$(window).scroll(function () { 
      console.log($(window).scrollTop());
});​

Пример: http://jsfiddle.net/3STQN/

person Paradise    schedule 27.07.2012

arrow_upward
0
arrow_downward

Если в представление может попасть несколько div, то вы можете изменить функцию isScrolledIntoView, скажем, на isTopInTheView или что-то подобное. В этой функции вы можете проверить, видна ли верхняя часть div, и если да, привязать этот div к верхней части экрана.

РЕДАКТИРОВАТЬ: и, конечно же, как только вы найдете первый div, который соответствует требованиям, просто вернитесь из функции, чтобы она не могла больше проверять div.

person vtomic85    schedule 02.04.2013