I believe the problem is that .header-top is in the flow of the page (meaning it takes up space) when the page is first loaded. However, as the page is scrolled and .fixed is added, .header-top is taken out of the flow. Then the rest of the page jumps up to take up the spot where .header-top used to be. I’d need to see the HTML to be sure though.

Thanks for help. Solution is simple:

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

I have a fixed header at my page which apears when user scroll down the page (170 pixels down when page width is less then 992 pixels and 320 pixels down when page is greater then 992 pixels width).

In the moment when header apears there is a “jump” / “skips” of the whole page on the height of this header so it’s looks bad – content goes rapiddly down.
How to remove this jump and display smoothly fixed header?

This is a code :

   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;
}