我只是在我的网站上自定义了我的固定导航，但它可以工作，但有一点 - 每个标题类型的页面都无法将主菜单识别为标题下的。当我第一次加载每个页面时，菜单本身出现在页面的顶部，就像固定导航使用主导航一样，而不是一直没有出现，直到到达实际菜单（标题是关于305px高）。
我不确定元素的顺序是否有问题，或者是因为js偏移。但在添加固定导航之前，一切工作都很好，每个页面都加载了标题下的菜单。
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class='header-page page-has-banner wsite-theme-dark'>
<div class="wrapper">
<div class="banner-wrap">
<div class="container">
<div class="banner">{content}</div>
</div>
</div><!-- end banner-wrap -->
<div class="dusk-header">
<div class="nav-wrap">
<div class="container">
<div class="logo">{logo}</div>
<div class="nav desktop-nav"></div>
<label class="hamburger"><span></span></label>
</div><!-- end container -->
</div>
</div>
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div><!-- end main-wrap -->
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div>
<div class="nav mobile-nav">{menu}</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
CSS
/* Fixed Nav */
body.page-has-banner.affix {
padding-top: 65px;
}
body.page-has-banner.affix .dusk-header {
position: fixed !important;
top: 0;
z-index: 15;
}
/* Fade out scroll */
body.fade-on-scroll .banner {
opacity: 0;
}
/* Mobile app */
body.wsite-checkout-page .dusk-header,
body.wsite-native-mobile-editor .dusk-header {
position: absolute !important;
}
/* Header */
.dusk-header {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
background: @navBg;
box-sizing: border-box;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.dusk-header .nav-wrap {
width: 100%;
background: @navBg;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.dusk-header .container {
display: table;
overflow-y: hidden;
}
.dusk-header label.hamburger {
display: none;
}
.dusk-header .logo {
display: table-cell;
vertical-align: middle;
margin-right: 30px;
color: white;
}
.dusk-header .logo .wsite-logo {
vertical-align: auto !important;
}
.dusk-header .logo a {
display: block;
overflow: hidden;
margin-right: 30px;
color: white;
letter-spacing: 0.03em;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: 26px;
font-weight: 300;
line-height: 40px;
}
.dusk-header .logo img {
display: block;
overflow: hidden;
max-width: 200px;
max-height: 40px;
}
.dusk-header .logo #wsite-title {
display: block;
max-width: 400px;
font-family: 'Lato', sans-serif;
font-size: 26px;
font-weight: 300;
line-height: 40px;
}
之后是导航代码
JS
// Fixed nav
$.fn.checkElementPositioning = function($el, $offsetHeightEl, scrollClass) {
if (!this.length) {
return;
}
if(((this.offset().top - $(window).scrollTop()) <=
$offsetHeightEl.outerHeight()) && !$el.hasClass(scrollClass)) {
$el.addClass(scrollClass);
} else if(((this.offset().top - $(window).scrollTop()) >=
$offsetHeightEl.outerHeight()) && $el.hasClass(scrollClass)) {
$el.removeClass(scrollClass);
}
}
任何想法或我是否需要提供更多信息？