Question

我一直在玩这个代码。我在我的网站上实现了一个粘性导航，当用户滚动时标题变得不可见时，它应该激活。标题div位于nav 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评论（与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%;
}

粘性标题抢先到早期

1 个答案: