Прокрутите страницу до определенной точки, затем начните прокручивать содержимое переполнения div, используя только одну полосу прокрутки.

Question

Мне нужна некоторая информация о том, как заставить полосу прокрутки страницы прокручивать содержимое переполнения элемента div вместо страницы после ее прокрутки до определенной точки.

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

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

Answer 1

Вы можете сделать это, используя свойство scrollTop ваших элементов.Сначала вам нужно определить, где закончился ваш заголовок (точка прокрутки вашего окна):

var header = $('#header');
var headerBottom = header.offset().top + header.height();

Затем вы можете анимировать полосу прокрутки окна в эту позицию:

$(window).animate({scrollTop: headerBottom});

Как только об этом позаботятся, вы получите ссылку на любой элемент, который хотите прокрутить, и анимировать его позицию scrollTop (тот же код, что и во фрагменте выше, который прокручивает window).вам понадобится обработчик события прокрутки , чтобы вы могли определить, когда пришло время изменить элемент, который вы прокручивали, с помощью:

$(window).scroll(function(){
    // logic to determine which element should be scrolling
});