从页面中间加载时，jQuery为固定页眉设置页边距顶部

我有一个易于滚动的标题，它的大小减小了（由于降低了徽标高度），并在主体上设置了页边空白顶部，以说明固定的标题

我的问题是，当我加载页面时，scrollTop（）超过页眉高度，页边空白顶部设置得太小，因为我的图像缩小了

css:

jquery：

jQuery(window).on('load', function(){

  marginTop();

  function marginTop(){
      var header = jQuery('.site-header');
      var headerHeight = header.height();
      var body = jQuery('body');

      body.css('margin-top', headerHeight);
  }

})
jQuery(window).on('scroll', function(){

  scrolling();

  function scrolling(){
      var header = jQuery('.site-header');
      var headerHeight = header.height();
      var scrollTop = jQuery(window).scrollTop();
      var flag = true;

      if (scrollTop > headerHeight && flag){

          header.addClass('scrolling');
          flag = false;

      } else {

          header.removeClass('scrolling');
          flag = true;
      }
  }
})

开发网站：

编辑：

我意识到，如果滚动超过我的设定值，仅根据徽标高度加载我身体的边距顶部是不起作用的。我也不太想在页眉和正文/任何容器的页边顶部设置静态高度

我试图在scrolling（）函数的else端添加一个marginTop（）函数的副本，以便在到达页面顶部时将其重置，但结果不准确（可能是由于过渡？）

谢谢，

---

Matt

我最后添加了另一个函数（reset_marginTop（）），不得不使用超时来解释我的转换。我不太想这样做，因为每次滚动到页面顶部时，它都会重置marginTop。但是，如果有人看了，我就用这个：

jQuery(window).on('scroll', function(){

function reset_marginTop(){
    var body = jQuery('body');
    var bodyMargin = parseInt(body.css('margin-top'));
    var header = jQuery('.site-header');
    var headerHeight = parseInt(header.height());

    if (headerHeight > bodyMargin) {
        body.css('margin-top', headerHeight);
    }

}

scrolling();

  function scrolling(){
      var header = jQuery('.site-header');
      var headerHeight = header.height();
      var scrollTop = jQuery(window).scrollTop();
      var flag = true;

      if (scrollTop > headerHeight && flag){

          header.addClass('scrolling');
          flag = false;

      } else {

          header.removeClass('scrolling');
          flag = true;

          setTimeout(reset_marginTop, 200);
      }
  }
})

---

我不理解你的问题

我希望能流畅地解决这个问题，而不是在页眉上设置实际高度。

我看不到你在页眉上设置高度。你想实现什么？我不想将页眉的高度设置为100px（这样就可以轻松地将页眉的边距设置为100px，这样就可以了）。我希望在没有特别设置的情况下，将页边顶部调整到页眉的高度。

jQuery(window).on('scroll', function(){

function reset_marginTop(){
    var body = jQuery('body');
    var bodyMargin = parseInt(body.css('margin-top'));
    var header = jQuery('.site-header');
    var headerHeight = parseInt(header.height());

    if (headerHeight > bodyMargin) {
        body.css('margin-top', headerHeight);
    }

}

scrolling();

  function scrolling(){
      var header = jQuery('.site-header');
      var headerHeight = header.height();
      var scrollTop = jQuery(window).scrollTop();
      var flag = true;

      if (scrollTop > headerHeight && flag){

          header.addClass('scrolling');
          flag = false;

      } else {

          header.removeClass('scrolling');
          flag = true;

          setTimeout(reset_marginTop, 200);
      }
  }
})