需要导航栏固定在 window Foundation 6 的顶部
Need nav bar to stick to top of window Foundation 6
我无法让导航栏保持在 window 之上。我试过使用 "sticky data" 但没有用。无论我做什么,它都会随着页面滚动。我还尝试将 class 添加到中小型导航。有什么建议吗?
Html:
<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
<a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="/assets/img/fingerLogoSM.2.gif">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Right Nav Section -->
<div class="top-bar-right">
<ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#">Technologies</a>
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li><a href="#">Foundation</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
</ul>
</div>
</nav>
<!--End Main Navigation-->
Css:
/* Small Navigation */
.logo-small {
float: right;
padding: 4px;
}
.title-bar {
padding: 0 .5rem;
background-color: #3D3242;
}
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
padding: 4px;
}
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.sticky {
width: 100%;
}
.logo-wrapper {
position: relative;
}
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: -46px;
}
// Right part
.top-bar-right {
width: 50%;
padding-left: 60px;
}
.top-bar-right ul {
float: left;
}
// Left part
.top-bar-left {
width: 50%;
padding-right: 60px;
}
.top-bar-left ul {
float: right;
}
}
这里有一个可行的解决方案,可以解决您的问题:https://jsfiddle.net/368z4fun/
像这样使用 position:fixed;
轻松解决:
.title-bar {
position:fixed;
}
nav {
position:fixed;
}
还添加了一些 CSS 来修复 fixed
更改的样式。当心使用 position:fixed;
的旧移动浏览器兼容性,您可能需要像 this.
这样的修复
您还可以使用 StyleBot 等浏览器插件在您的实际网站上进行检查。看看这个:
祝你好运!
我在 Zurb 基金会论坛上得到了好心人的帮助。下面是实现粘性 TopBar 的正确方法:
<div data-sticky-container>
<div class="small-12 sticky" data-sticky data-options="marginTop: 0">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
</div>
</div>
再次感谢瓦尔!
我无法让导航栏保持在 window 之上。我试过使用 "sticky data" 但没有用。无论我做什么,它都会随着页面滚动。我还尝试将 class 添加到中小型导航。有什么建议吗?
Html:
<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
<a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="/assets/img/fingerLogoSM.2.gif">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Right Nav Section -->
<div class="top-bar-right">
<ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#">Technologies</a>
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li><a href="#">Foundation</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
</ul>
</div>
</nav>
<!--End Main Navigation-->
Css:
/* Small Navigation */
.logo-small {
float: right;
padding: 4px;
}
.title-bar {
padding: 0 .5rem;
background-color: #3D3242;
}
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
padding: 4px;
}
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.sticky {
width: 100%;
}
.logo-wrapper {
position: relative;
}
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: -46px;
}
// Right part
.top-bar-right {
width: 50%;
padding-left: 60px;
}
.top-bar-right ul {
float: left;
}
// Left part
.top-bar-left {
width: 50%;
padding-right: 60px;
}
.top-bar-left ul {
float: right;
}
}
这里有一个可行的解决方案,可以解决您的问题:https://jsfiddle.net/368z4fun/
像这样使用 position:fixed;
轻松解决:
.title-bar {
position:fixed;
}
nav {
position:fixed;
}
还添加了一些 CSS 来修复 fixed
更改的样式。当心使用 position:fixed;
的旧移动浏览器兼容性,您可能需要像 this.
您还可以使用 StyleBot 等浏览器插件在您的实际网站上进行检查。看看这个:
祝你好运!
我在 Zurb 基金会论坛上得到了好心人的帮助。下面是实现粘性 TopBar 的正确方法:
<div data-sticky-container>
<div class="small-12 sticky" data-sticky data-options="marginTop: 0">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
<a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
</div>
</div>
再次感谢瓦尔!