当从页面中间加载时，jQuery 为固定标题设置 margin-top

Question

我有一个简单的滚动标题，它的尺寸会减小(由于 Logo 高度减小)，并在主体上设置 margin-top 以说明固定标题。

我的问题是，当我使用超过标题高度的 scrollTop() 加载页面时，margin-top 设置得太小 - 因为我的图像缩小了。

CSS:

body {
  -webkit-transition: margin-top .2s ease;
  transition: margin-top .2s ease;
}

.site-header {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #555;
  background: rgba(71,117,25,.9);
}

.custom-logo-link img {
  max-height: 75px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.scrolling .custom-logo-link img {
  max-height: calc(75px * .8);
  -webkit-transform: translateX(25%);
  transform: translateX(25%);
}

j查询:

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

开发网站:http://www.dev.mediaworksweb.com/cologeo-wp/

编辑:

我意识到，如果它滚动超过我的设置点，则仅根据 Logo 高度加载我 body 的边距顶部是行不通的。我也不太想在页眉上设置静态高度，在主体/任何容器上设置 margin-top。

我试图在我的 scrolling() 函数的另一端添加一个 marginTop() 函数的副本，以在到达页面顶部时重置它，但它不准确(可能是由于过渡？)。

谢谢，马特

Answer 1

好吧，我最终添加了另一个函数 (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);
      }
  }
})