粘性導航欄功能

我正在嘗試使用jQuery waypoint創建粘性導航欄。我不知道一些關於Javascript的知識，所以我試圖從這些例子中拼湊出來。粘性導航欄功能

這裏是我使用的導航：

<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(); 
    }); 
});

我感謝所有的你的幫助！

來源

2012-08-08 dcaryll

如果你不希望你的網站被淹沒，我會發布代碼。此外它只是很好的禮儀 – VoronoiPotato 2012-08-08 19:45:39

謝謝，代之以發佈代碼。希望能幫助到你。 – dcaryll 2012-08-08 20:05:13

假設你有一個像類：

.nav-fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

你可以寫一些jQuery的像這樣（從Twitter的引導文檔頁面編寫的代碼修改）。它會監視你的導航元素。當它到達屏幕的頂部時，它將得到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'); 
    } 
}

您可以根據需要修改此代碼以使用您的waypoints插件。

來源

2012-08-08 19:56:45 jackwanders

粘性導航欄功能

回答

相關問題