粘性标题捕捉到顶部到早期

Question

我一直在玩弄这段代码。我在我的网站上实现了一个粘性导航，它应该在用户滚动时标题变得看不见时激活。标题 div 位于导航 div 上方。粘性部分工作正常，但它激活得太快了。一旦我开始滚动，它就会立即捕捉到顶部，然后一旦标题再次出现，它就不会恢复到原来的位置。

这是使它工作的 jquery：

(function($) {

  var $body,
    $target,
    targetoffsetTop,
    resizetimer,
    stickyclass = 'sticky'

  function updateCoords() {
    targetoffsetTop = $target.offset().top
  }

  function makesticky() {                     //Sets the sticky class to activate once  
    var scrollTop = $(document).scrollTop()   //the scroll offset is greater than 
    if (scrollTop >= targetoffsetTop) {        //how far the div is from the top.
      if (!$body.hasClass(stickyclass)) {
        $body.addClass(stickyclass)
      }
    } else {                        
      if ($body.hasClass(stickyclass)) {
        $body.removeClass(stickyclass)
      }
    }
  }

  $(window).on('load', function() {
    $body = $(document.body)
    $target = $('#header_lg')              //This is the target div that get's sticky
    updateCoords()
    $(window).on('scroll', function() {
      requestAnimationFrame(makesticky)
    })
    $(window).on('resize', function() {
      clearTimeout(resizetimer)
      resizetimer = setTimeout(function() {
        $body.removeClass(stickyclass)
        updateCoords()
        makesticky()
      }, 50)
    })
  })

})(jQuery)

CSS：

#header_lg {          //Before sticky
  width: 100%;
  height: 75px;
  padding: .7%;
  background-color: blue;
  -webkit-transition: height 1s, width 1s;
  -moz-transition: height 1s, width 1s;
  transition: height 1s, width 1s;
}
body.sticky #header_lg {   //After sticky
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
}

我对 javascript 还很陌生，因此我们非常感谢各位专家就代码为什么不能正常工作提出的任何建议。如果它很重要，则页面采用引导格式，因此它位于visible-lg 类中，其中container 类设置为style="width:100%; margin:0; padding:0;"。 HTML 代码只是一个带有一些填充文本的空 div。

Answer 1

你的 CSS cmets 没有写正确（不同于 js）：

try this:（感谢@Toni 有用的笔，我在这里叉出演示）

#header_lg {          /*Before sticky*/
  width: 100%;
  height: 75px;
  padding: .7%;
  background-color: blue;
  -webkit-transition: height 1s, width 1s;
  -moz-transition: height 1s, width 1s;
  transition: height 1s, width 1s;
}
body.sticky #header_lg {   /*After sticky*/
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
}