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

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 🙁