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

Question

В настоящее время я использую комбинацию гладких прокрутки и идентификаторов/якорных тегов для прокрутки содержимого на моем сайте. Код ниже получает идентификатор следующего «раздела» в DOM и добавляет его ID как «просмотр следующего раздела» href, поэтому после его нажатия он перейдет к вершине этого div. Затем он выполняет итерацию, обновляя 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

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

немногих вещей, которые я сделал были:

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

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

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

   resizeContent(initWinHeight, numSection) 
   

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

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

   $('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 , я на самом деле использовал Preety простой способ:

$('.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); 
});