Обновить позицию прокрутки при изменении размера окна

Question

В настоящее время я использую комбинацию плавной прокрутки и идентификаторов / якорных тегов для прокрутки контента на моем сайте. Приведенный ниже код получает идентификатор следующего "раздела" в DOM и добавляет его идентификатор в качестве ссылки "просмотреть следующий раздел", поэтому после щелчка по нему прокручивается верхняя часть этого раздела. Затем он выполняет итерацию, обновляя href с помощью следующего идентификатора каждый раз и т. Д. До тех пор, пока не будет отображен последний раздел, и прокрутится обратно к началу. Довольно просто.

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

Я создал JSFiddle. Это можно увидеть после того, как вы нажмете стрелку, чтобы перейти к следующему разделу, а затем измените размер окна: http://jsfiddle.net/WFQ9t/3/

Я хочу постоянно фиксировать эту верхнюю позицию, поэтому даже если вы измените размер браузера, позиция прокрутки будет обновлена, чтобы отразить это.

Заранее спасибо, R

var firstSectionID = $('body .each-section').eq(1).attr('id');
$('.next-section').attr('href', '#' + firstSectionID);

var i = 1;
$('.next-section').click(function() {

    var nextSectionID = $('body .each-section').eq(i).attr('id');
    i++;
    $('.next-section').attr('href', '#' + nextSectionID);

    var numberOfSections = $('body .each-section').length;
    var lastSectionID = $('body .each-section').eq(numberOfSections).attr('id');

    if ($('.next-section').attr('href') == '#' + lastSectionID ) { 
        $('.next-section').attr('href', '#introduction');
        i = 1;
    }

});

Answer 1

Хорошо, пожалуйста, проверьте эту скрипку: http://jsfiddle.net/WFQ9t/9/

Несколько вещей, которые я сделал, были:

1. Сделал несколько глобальных переменных для обработки номера экрана (на каком экране вы находитесь, а также на начальной высоте окна. Это будет использоваться при загрузке экрана, а также при нажатии на .next-session стрела.

   var initWinHeight = $(window).height();
   var numSection = 0;
   

2. Затем я бросил эти переменные в ваш resizeContent() функция

   resizeContent(initWinHeight, numSection)
   

   так что он будет работать на нагрузку и изменить размер

3. Я сделал body перемещаться туда, где это необходимо, чтобы приспособиться к движению дивов (я до сих пор не понимаю, что движутся дивы, когда происходит обычная анимация).

   $('body').css({
       top: (((windowHeight - initWinHeight)*numSection)*-1) + "px"
   });
   

4. Затем в функции щелчка я добавляю 1 к номеру раздела, сбрасываю начальную высоту окна, а затем также сбрасываю body в top:0, Обычная анимация, которую вы уже разместили, помещает следующий раздел вверху страницы.

   numSection++;
   initWinHeight = $(window).height();
   $('body').css({top:"0px"}, 1000);
   

5. Наконец, я сбросил numSections Счетчик при достижении последней страницы (возможно, вам придется сделать это 0 вместо 1)

   numSection = 0;
   

У скрипки есть все это в правильных местах, это только шаги, которые я предпринял, чтобы изменить код.

Answer 2

Вот решение, которое я нашел, но я не использую якорные ссылки на этом этапе, я использую классы

Вот мой HTML-код:

<section class="section">
    Section 1
</section>

<section class="section">
    Section 2
</section>

<section class="section">
    Section 3
</section>

<section class="section">
    Section 4
</section>

А вот мой код jQuery/Javascript, я фактически использовал простой способ:

    $('.section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('.section.active');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.hasClass('section')) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 800);

                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    } else {
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 800);

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    }
});


/*THE SIMPLE SOLUTION*/
$(window).resize(function(){
    var active = $('.section.active')

     $('body, html').animate({
        scrollTop: active.offset().top
    }, 10);
});