1

This is an area i'm not too knowledgable on. Basically I have a header on http://www.bradlyspicer.net which is responsive. I would like it so when the user scrolls down and the .header is off screen that a nav bar which follows appears at the top of the web page.

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

This is the header which contains the navigation tag and it's id.

Similar to this site:

http://www.interviewmagazine.com/

Edit:

It's worth noting the site is responsive. So I would prefer it if only responsive code could be used.

Bradly Spicer
  • 2,278
  • 5
  • 24
  • 34

2 Answers2

1

Here is a JQuery script I have used in the past, although now Bootstrap does it for me :) Change the menu classes to ones that suit your site, also here is a fiddle with it working http://jsfiddle.net/dN3S5/4/

JQuery: 

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

Use this instead to get header height: 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}
Alex
  • 2,651
  • 2
  • 25
  • 45
  • by using var num = $('.header').height(); will that keep my responsive element? – Bradly Spicer Jan 15 '14 at 15:43
  • It will allow you to use whatever the header height is when the script is called rather than a fixed height. You could also change it to something along the lines of $(window).height() if you want to get it appearing after you scroll down one pages' worth of pixels – Alex Jan 15 '14 at 15:46
  • Don't mean to sound really dumb... but i'm slight oblivious. Does this require the div with a class .menu-wrap to have been created and if it is it will add fixed-nav to the class. – Bradly Spicer Jan 15 '14 at 15:54
  • Asking a question is the least dumb thing someone can do :) looking at your site, the nav has the class .menu so you can change the class in my script to be just .menu rather than .menu-wrap – Alex Jan 15 '14 at 16:00
  • Now I'm really confused! haha :D I thought I was using .nav? either way, .nav and/or .menu won't change it for me. – Bradly Spicer Jan 15 '14 at 16:04
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45299/discussion-between-bradly-spicer-and-alex) – Bradly Spicer Jan 15 '14 at 16:29
0

You basically need something like this:

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

and css:

#navigation.fixed {
   position: fixed;
   top: 10px;
}
Eternal1
  • 5,447
  • 3
  • 30
  • 45