Floating navigation menu using Wordpress Twenty Eleven theme

Question

I'm currently developing a site using the WordPress Twenty Eleven theme and I would like to have the main navigation bar stick to the top of the screen once it has been scrolled past, just like the paragraph on the right side of this page http://fiddle.jshell.net/zsJAr/show/light/ .

So far I have added code in the header to include jQuery just after the opening head tag:

<?php wp_enqueue_script("jquery"); ?>

And later I have included my javascript before the closing head tag:

<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/moveScroller.js"></script>

The contents of moveScroller.js is:

var $j = jQuery.noConflict();

$j(window).load(function(){
    $j(function() {
      var a = function() {
        var b = $j(window).scrollTop();
        var d = $j("#access-anchor").offset({scroll:false}).top;
        var c=$j("#access");
        if (b>d) {
          c.css({position:"fixed",top:"0px"})
        } else {
          if (b<=d) {
            c.css({position:"relative",top:""})
          }
        }
      };
      $j(window).scroll(a);a()
    });
});

The "access" and "access-anchor" IDs are declared further down in the following block:

<div id="access-anchor"></div>
<nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

</nav><!-- #access -->

This seems to be having no effect whatsoever and I'm not really not sure how to go about this. With fairly little experience using WordPress, I would really appreciate some help on the matter. Does anyone have any idea how to go about this?

Answer 1

If you are using jQuery, you can also animate the scrolling, looks much more funny =) I used this code a weeks ago, it doesn't use position fixed, it uses margin-top, but you can change it easily:

var scroll = 0; //initially scroll is 0
var marginTop = 10; //we add an initial  margin
$(window).scroll(function () {
        //once the user scrolls, we calculate the new margin-top
        marginTop = ($(document).scrollTop() - scroll) + marginTop;
        //and we save the new amount of scroll, for the next time
        scroll = $(document).scrollTop();
        $("#divYouWantToMove").animate({"marginTop": marginTop+"px"}, {duration:500,queue:false} );
});

Hope it helps!

Answer 2

So it seems like this probably isn't possible or it's far too complicated. Nobody knows about this on WordPress Stack Exchange or the WordPress forums, so I'm going to have to give up on it :(