jquery исправил div при прокрутке вниз - PullRequest
Новая
       12

jquery исправил div при прокрутке вниз

1 голос
/ 04 апреля 2011

У меня есть панель навигации по галерее, которую я бы хотел закрепить наверху, когда страница прокручивается слишком далеко. Сценарий, который у меня есть, работает нормально, но при применении класса происходит «скачок» (переход между фиксированной позицией).

Ссылка (в зависимости от вашего разрешения вам может потребоваться свернуть страницу, чтобы увидеть эффект).

Код : 

<style>  
.HighIndex {z-index: 40; position: fixed; top: 10px;}
</style>

Сценарий 

var msie6 = $.browser == 'msie' && $.browser.version < 7;

    if (!msie6) {
      var top = $('#navContainer').offset().top - parseFloat($('#navContainer').css('margin-top').replace(/auto/, 0));
      $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (y >= top) {
          // if so, ad the fixed class
          $('#navContainer').addClass('HighIndex');
        } else {
          // otherwise remove it
          $('#navContainer').removeClass('HighIndex');
        }
      });
    }

Ответы [ 2 ]

0 голосов
/ 04 апреля 2011

Я создал пустой DIV, который расширяется, чтобы заполнить пространство, когда навигация поднимается вверх. вот код: 

if (!msie6) {
  var top = $('#navContainer').offset().top - parseFloat($('#navContainer').css('margin-top').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top-10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
      $('#navContainerSpacer').css('height','138px');
    } else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
      $('#navContainerSpacer').css('height','0');
    }
  });
}
0 голосов
/ 04 апреля 2011

скачок происходит из-за top: 10px; в вашем CSS: все позиции правильны, но 10 дополнительных пикселей появляются из ниоткуда, когда применяется класс.Таким образом, у вас есть два варианта:

1

Удалить top: 10px; из .HighIndex определения (которое, я полагаю, вы бы не хотели)

2

Отразите эти 10px в своем javascript.Это может выглядеть так: 

if (y >= top - 10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
} else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
}
...