jquery - 响应 header 关闭后的固定位置,强制 <nav> 跟随

  显示原文与译文双语对照的内容

这是我不太了解的地方。 基本上,我在 http://www.bradlyspicer.net 上有一个 header,它是响应的。 当用户向下滚动并且。header关闭屏幕时,会出现在网页顶部的导航栏。


<div id="header" class="home-header">
<div class="slogan">
<?php bloginfo('name');?> <?php wp_title();?>
</div>
<!-- NAVIGATION -->
 <nav id="navigation" class="nav" role="navigation" onclick="">
 <?php wp_nav_menu();?> 
 </nav>
<!--NAVIGATION -->
</div>

这是包含导航标记的header,它是标识。

这里站点类似:

http://www.interviewmagazine.com/

编辑:

值得注意的是这个网站。 所以我希望只要能使用React灵敏的代码。

时间: 作者:

下面是我以前使用过的JQuery脚本,虽然现在 Bootstrap 为我做了:改变菜单类为适合你的站点,这里是一个适合于你的站点的fiddle 。

jQuery:


var num = 145;//number of pixels before modifying styles

使用这里选项可以获得 header 高度: var = $('.header').height();


$(window).bind('scroll', function () {
 if ($(window).scrollTop()> num) {
 $('.menu').addClass('fixed-nav');
 }
 else {
 $('.menu').removeClass('fixed-nav');
 }
});

css:


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

作者:

你基本上需要这样的东西:


viewport = $(window);
navbar = $("#navigation");
offset = navbar.offset().top-10;
$("document").scroll(function(){
 if (viewport.scrollTop()> offset && 
!navbar.hasClass("fixed") {
 return navbar.addClass("fixed");
 }
 if (viewport.scrollTop() <offset &&
 navbar.hasClass("fixed") {
 return navbar.removeClass("fixed");
 }
});

和 css:


#navigation.fixed {
 position: fixed;
 top: 10px;
}

作者:
...