粘性导航栏功能

我正在尝试使用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

粘性导航栏功能

回答

相关问题