[英]Sticky Navigation Bar Functionality
我正在嘗試使用jQuery航路點創建粘性導航欄。 我對Java語言一無所知,因此我嘗試將這些示例結合在一起。
這是我正在使用的導航:
<section id="nav">
<div class="container">
<div id="mainnav">
<nav id="myNavigation" class="horizontal_nav pageScrollerNav topNav sixteen columns alpha">
<ul>
<li><a href="#"><i class="icon-home"></i> Home</a></li>
<li><a href="#"><i class="icon-picture"></i> Portfolio</a></li>
<li><a href="#"><i class="icon-list-ul"></i> Services</a></li>
<li><a href="#"><i class="icon-comments"></i> Contact</a></li>
<li><a href="#"><i class="icon-rss"></i> Follow Me</a></li>
</ul>
</nav>
</div> <!--end mainnav-->
</div> <!--end nav-container-->
</section> <!--end nav-->
這是我設置的jQuery:
$(document).ready(function() {
$('.top').addClass('hidden');
$.waypoints.settings.scrollThrottle = 30;
$('#mainnav').waypoint(function(event, direction) {
$('.top').toggleClass('hidden', direction === "up");
}, {
offset: '-100%'
}).find('#myNavigation').waypoint(function(event, direction) {
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
感謝您的幫助!
假設您有一個類似的課程:
.nav-fixed {
position: fixed;
top: 0;
left: 0;
}
您可以像這樣編寫一些jQuery(從為Twitter的Bootstrap文檔頁面編寫的代碼中修改)。 它將監視您的導航元素。 當它到達屏幕頂部時,它將獲得nav-fixed
類,該類會將元素固定到頁面的左上角。
var $window = $(window),
$nav = $('#navigation'),
nav_top = $nav.offset().top,
isNavFixed = false;
$window.on('scroll',checkNav); // call function when page scrolls
checkNav(); // initial call to function on document ready
function checkNav() {
var scroll_top = $window.scrollTop();
if(scroll_top >= nav_top && !isNavFixed) {
isNavFixed = true;
$nav.addClass('nav-fixed');
} else if(scroll_top <= nav_top && isNavFixed) {
isNavFixed = false;
$nav.removeClass('nav-fixed');
}
}
您可以根據需要修改此代碼,以使用Waypoint插件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.