2016-07-27 5 views
1

У меня есть панель навигации, которая фиксируется при прокрутке к ней. Навигационная панель работает отлично. Однако у меня также есть вторичная панель навигации, которая открывается ниже основного навигационного устройства. Вторичный навигатор фиксируется при прокрутке первичного навигатора.JQuery: Получить положение прокрутки на странице обновления

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

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

$(window).scroll(function() {     // assign scroll event listener 
 
\t 
 
\t  var s = $("#primary-nav"); 
 
\t \t var pos = s.position();  // get current position 
 
\t \t $(window).scroll(function() { 
 
     var windowpos = $(window).scrollTop(); 
 
     //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
 
     if (windowpos > pos.top) { 
 
      $('#secondary-nav').css({ 
 
\t    position: 'fixed', 
 
\t    top: '60px', 
 
\t    zIndex: '505', 
 
\t   }); 
 
     } else { 
 
      $('#secondary-nav').css({ 
 
\t    position: 'static', 
 
\t   }); 
 
    });

ответ

1

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

function navScroll(){ 
 
    
 
    var s = $("#primary-nav"); 
 
    var pos = s.position();  // get current position 
 
    var windowpos = $(window).scrollTop(); 
 
    
 
    //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); 
 
    if (windowpos > pos.top) { 
 
     $('#secondary-nav').css({ 
 
      position: 'fixed', 
 
      top: '60px', 
 
      zIndex: '505', 
 
     }); 
 
    } else { 
 
     $('#secondary-nav').css({ 
 
      position: 'static', 
 
     }); 
 
    } 
 
} 
 

 
$(window).scroll(function() { 
 
    navScroll(); 
 
}); 
 

 
$(document).ready(function() { 
 
    navScroll(); 
 
});

0

использовать заголовок фиксации кода готовой функции документа

$(document).ready(function(){ 
// code here 
}); 
Смежные вопросы