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 纵向上居中引导导航栏项目?