jquery - 强制 <nav> 在响应式标题离开屏幕后跟随在固定位置

Question

这是一个我不太了解的领域。基本上我在 http://www.bradlyspicer.net 上有一个标题这是有反应的。我希望这样，当用户向下滚动并且 .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>

这是包含导航标签及其 ID 的 header 。

类似于此站点:

http://www.interviewmagazine.com/

编辑:

值得注意的是该网站是响应式的。因此，如果只能使用响应式代码，我会更喜欢它。

Answer 1

这是我过去使用过的 JQuery 脚本，虽然现在 Bootstrap 为我做了 :) 将菜单类更改为适合您网站的类，这里还有一个可以正常工作的 fiddle http://jsfiddle.net/dN3S5/4/

JQuery:

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

改用它来获取标题高度:var num = $('.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}