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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 通过检查当前导航栏位置固定导航栏并仅在navbar.offset()。top大于$ wind时应用该类相关的知识,希望对你有一定的参考价值。

/**
 * 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;
}

以上是关于css 通过检查当前导航栏位置固定导航栏并仅在navbar.offset()。top大于$ wind时应用该类的主要内容,如果未能解决你的问题,请参考以下文章

js+css+html实现固定侧边栏效果

如何抵消固定导航栏将我带到的位置?

js滚动到指定位置导航栏固定顶部

js-滚动到指定位置导航栏固定顶部

在bootstrap中 怎么使得导航栏固定在顶部

仅在 iPad 纵向上居中引导导航栏项目?