粘性导航栏功能答案

【问题标题】：Sticky Navigation Bar Functionality粘性导航栏功能
【发布时间】：2012-08-08 19:43:48
【问题描述】：

我正在尝试使用 jQuery 航点创建一个粘性导航栏。我对 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();
    });
});

感谢您的所有帮助！

【问题讨论】：

如果您不希望您的网站被淹没，我会发布代码。这也是一种很好的礼仪
谢谢，改为发布代码。希望对您有所帮助。

标签： javascript jquery css jquery-waypoints

【解决方案1】：

假设你有这样的课程：

.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');
    }
}

您可以根据需要修改此代码以使用您的航点插件。

【讨论】：