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的标题。

与此网站类似：

http://www.interviewmagazine.com/

编辑：

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

Answer 1

这是我过去使用的JQuery脚本，虽然现在Bootstrap为我做了:)将菜单类更改为适合您网站的类，同时这里有一个小工具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}

Answer 2

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

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

在响应标头关闭屏幕后强制<nav>跟随固定位置</nav>

2 个答案: