这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件。我们曾经在很多网站上都看到过这种顶部固定导航菜单特效。Disqus For Websites的导航菜单就是一个很好的例子。
HTML结构
使用一个section来包含住头部的图像、标题和按钮，固定导航菜单使用一个div.cd-secondary-nav包住一个无序列表：
Menu
Services
CSS样式
这款插件是移动设备优先的，我们为无序列表设置position: fixed，并将它放到屏幕的右下方(此时它看起来像一个图标)。当用户点击.cd-secondary-nav-trigger按钮，我们给无序列表添加上.is-visible类，并将CSS3 Scale的值从0变为1，使列表展开。
当屏幕大于1170像素的时候，我们将.cd-secondary-nav-trigger按钮隐藏。并将无序列表的定位设置为static。
.cd-secondary-nav ul {
position: fixed;
right: 5%;
bottom: 20px;
visibility: hidden;
transform: scale(0);
transform-origin: 100% 100%;
transition: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
visibility: visible;
transform: scale(1);
transition: transform 0.3s, visibility 0s 0s;
}
@media only screen and (min-width: 1170px) {
.cd-secondary-nav ul {
/* reset navigation values */
position: static;
width: auto;
max-width: 100%;
visibility: visible;
transform: scale(1);
}
}
.cd-secondary-nav-trigger {
position: fixed;
bottom: 20px;
right: 5%;
width: 44px;
height: 44px;
}
@media only screen and (min-width: 1170px) {
.cd-secondary-nav-trigger {
display: none;
}
}
当用户滚动鼠标到“intro”部分时，我们为导航菜单设置.is-fixed类。将它的定位从relative 改变为fixed并修改他的高度。然后为它的子节点添加.animate-children，来使它的各个子节点产生动画。这里不能使用一个class来制作动画，因为在Firefox中有一个BUG-CSS transition animation fails when parent element changes position attribute。
@media only screen and (min-width: 1170px) {
.cd-secondary-nav.is-fixed {
position: fixed;
left: 0;
top: 0;
height: 70px;
width: 100%;
}
.cd-secondary-nav li a {
padding: 58px 40px 0 40px;
transition: padding 0.2s;
}
.cd-secondary-nav li a span {
transition: opacity 0.2s;
}
.cd-secondary-nav.animate-children li a {
padding: 26px 30px 0 30px;
}
.cd-secondary-nav.animate-children li a span {
opacity: 0;
}
}
当导航菜单处于“固定”状态时，我们希望Logo和下载按钮显示出来。所以我们定义了两个class：.is-hidden和.slide-in。
@media only screen and (min-width: 1170px) {
#cd-logo.is-hidden {
/* assign a position fixed and move outside the viewport (on the left) */
opacity: 0;
position: fixed;
left: -20%;
transition: left 0.3s, opacity 0.3s;
}
#cd-logo.is-hidden.slide-in {
/* slide in when the secondary navigation gets fixed */
left: 5%;
opacity: 1;
}
.cd-btn.is-hidden {
/* assign a position fixed and move outside the viewport (on the right) */
opacity: 0;
position: fixed;
right: -20%;
transition: right 0.3s, opacity 0.3s;
}
.cd-btn.is-hidden.slide-in {
/* slide in when the secondary nav gets fixed */
right: 5%;
opacity: 1;
}
}
JAVASCRIPT
当用户滚动页面超过导航条位置，我们为导航条添加.is-fixed并改变它的position的值。我们为.animate-children添加50ms的延时来使它的子节点产生动画。因为它们的动画不是同时发生的，因此，位置值的改变不会影响过渡效果。
var secondaryNav = $('.cd-secondary-nav'),
secondaryNavTopPosition = secondaryNav.offset().top;
$(window).on('scroll', function(){
if($(window).scrollTop() > secondaryNavTopPosition ) {
secondaryNav.addClass('is-fixed');
setTimeout(function() {
secondaryNav.addClass('animate-children');
$('#cd-logo').addClass('slide-in');
$('.cd-btn').addClass('slide-in');
}, 50);
} else {
secondaryNav.removeClass('is-fixed');
setTimeout(function() {
secondaryNav.removeClass('animate-children');
$('#cd-logo').removeClass('slide-in');
$('.cd-btn').removeClass('slide-in');
}, 50);
}
});
