css 通过检查当前导航栏位置固定导航栏并仅在navbar.offset（）。top大于$ wind时应用该类

Posted 2021-05-13

/**
 * Fix Navbar on Scroll
 *
 * replace {.header-area} width your header CSS class selector 
 * replace {header-area-fixed} with your CSS class for fixed header
 */
jQuery(document).ready(function($) {

  var $body = $('body'),
      $window  = $(window);

  $window.ready(fixNavbarOnScroll).resize(function() {
    fixNavbarOnScroll();
  });

  function fixNavbarOnScroll( width ) {
    var $navbar      = $('.header-area'),
        $wpadminbar  = $('#wpadminbar'),
        navbarTop, $navbarWrapper;

    if ( ! $navbar.parent('.header-area-wrapper').length ) {
      $navbar.wrapAll('<div class="header-area-wrapper"></div>');
    }

    $navbarWrapper = $navbar.closest('.header-area-wrapper');
    
    navbarTop = $navbarWrapper.offset().top - $wpadminbar.outerHeight();

    $navbarWrapper.css({
      minHeight: $navbar.outerHeight()
    });

    $window.scroll(function() {

      if ( $(this).scrollTop() >= navbarTop ) {
        $navbar.addClass( 'header-area-fixed' );
      } else {
        $navbar.removeClass( 'header-area-fixed' );
      }

    });
  }

});

.header-area.header-area-fixed
{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

.admin-bar .header-area.header-area-fixed
{
    top: 32px;
}