Question

我有一个简单的滚动标题，尺寸减小（由于徽标高度降低），并在主体上设置边距顶部以考虑固定标题。

我的问题是当我加载带有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%);
}

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

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

编辑：

我意识到如果它滚动超过我的设定点，仅根据徽标高度加载我的身体的margin-top是行不通的。我也不太想在我的标题和身体/任何容器上的margin-top设置静态高度。

我试图在我的scrolling（）函数的else端添加我的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);
      }
  }
})

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

1 个答案: