Javascript 加载新元素时跳过网站

在我的页面上有一个固定的标题，当用户向下滚动页面时会显示（当页面宽度小于992像素时会向下滚动170像素，当页面宽度大于992像素时会向下滚动320像素）

当标题出现时，整个页面在这个标题的高度上有一个“跳跃”/“跳过”，所以看起来很糟糕——内容快速下降。 如何删除此跳转并平滑显示固定标题

这是一个代码：

   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 top

位于页面流中（这意味着它会占用空间）。但是，在滚动页面并添加

.fixed

时，

.header top

将从流中删除。然后页面的其余部分跳起来占据

.header top

以前所在的位置。不过，我需要查看HTML才能确定。

谢谢您的帮助。解决方案很简单：

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

函数响应列（）{
如果（$（文档）.width（）170）{
$（'.header-top'）.addClass（'fixed'）；
$（'#header'）.css（'padding-top'，'48px'）；
}否则{
$（'.header top'）.removeClass（'fixed'）；
$（'#header'）.css（'padding-top'，'0px'）；
}
});
}
else if（$（document）.width（）>=992）
{
$（'.container#columns#inner#left column'）。prependTo（'.container#columns#inner'）；
$（窗口）.bind（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>320）{
$（'.header-top'）.addClass（'fixed'）；
$（'#header'）.css（'padding-top'，'48px'）；
}否则{
$（'.header top'）.removeClass（'fixed'）；
$（'#header'）.css（'padding-top'，'0px'）；
}
});
}
}
$（document）.ready（函数（）{responsivecolumn（）；}）；
$（窗口）.resize（函数（）{responsivecolumn（）；}）；

您是对的，问题是当标题更改为“修复”时，旧标题将被取消，页面将向上。。。如何解决？

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

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