Пропуск сайта при загрузке нового элемента

Question

У меня есть фиксированный заголовок на моей странице, который появляется, когда пользователь прокручивает страницу вниз (170 пикселей вниз, если ширина страницы меньше 992 пикселей, и 320 пикселей вниз, если страница больше ширины 992 пикселей).

В тот момент, когда появляется заголовок, происходит «скачок» / «пропуск» всей страницы по высоте этого заголовка, поэтому он выглядит плохо - контент быстро падает. Как убрать этот скачок и отобразить плавно фиксированный заголовок?

Это код:

   function responsivecolumn(){

     if ($(document).width() <= 991)
     {
       $('.container #columns_inner #left-column').appendTo('.container #columns_inner');
       // ---------------- Fixed header responsive ----------------------
       $(window).bind('scroll', function () {
         if ($(window).scrollTop() > 170) {
           $('.header-top').addClass('fixed');
         } else {
           $('.header-top').removeClass('fixed');
         }
       });
     }
     else if($(document).width() >= 992)
     {
       $('.container #columns_inner #left-column').prependTo('.container #columns_inner');
       $(window).bind('scroll', function () {
         if ($(window).scrollTop() > 320) {
           $('.header-top').addClass('fixed');
         } else {
           $('.header-top').removeClass('fixed');
         }
       });
     }
   }
   $(document).ready(function(){responsivecolumn();});
   $(window).resize(function(){responsivecolumn();});

#header .header-top.fixed {
   position: fixed;
   top: 0;
   width: 100%;
   margin: 0px;
   background: #FFF;
   padding: 3px 0px;
   z-index: 9999;
   left: 0px;
   border-bottom: 1px solid #ddd;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.1);

#header .header-top {
   padding-bottom: 0px;
   min-height: 48px;
}

Answer 1

Спасибо за помощь. Решение простое:

function responsivecolumn(){

  if ($(document).width() <= 991)
  {
    $('.container #columns_inner #left-column').appendTo('.container #columns_inner');
    // ---------------- Fixed header responsive ----------------------
    $(window).bind('scroll', function () {
      if ($(window).scrollTop() > 170) {
        $('.header-top').addClass('fixed');
        $('#header').css('padding-top', '48px');
      } else {
        $('.header-top').removeClass('fixed');
        $('#header').css('padding-top', '0px');
      }
    });
  }
  else if($(document).width() >= 992)
  {
    $('.container #columns_inner #left-column').prependTo('.container #columns_inner');
    $(window).bind('scroll', function () {
      if ($(window).scrollTop() > 320) {
        $('.header-top').addClass('fixed');
        $('#header').css('padding-top', '48px');
      } else {
        $('.header-top').removeClass('fixed');
         $('#header').css('padding-top', '0px');
      }
    });
  }
}
$(document).ready(function(){responsivecolumn();});
$(window).resize(function(){responsivecolumn();});

Answer 2

Я считаю, что проблема в том, что .header-top - это в поток страницы (то есть занимает место) при первой загрузке страницы. Однако, поскольку страница прокручивается и добавляется .fixed, .header-top отбирается из потока. Затем остальная часть страницы прыгает вверх, чтобы занять место, где раньше был .header-top. Мне нужно увидеть HTML, чтобы быть уверенным.