Wordpress Themes - WP Forum at BFA - Trying to make pages menu sticky

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Trying to make pages menu sticky - javascript trouble? (http://forum.bytesforall.com/showthread.php?t=18475)

Trying to make pages menu sticky - javascript trouble?

Hey all,

I'm trying to make the pages menu on the site I'm working on stick to the top of the page when the user scrolls down, following the tutorial here: http://www.dwuser.com/education/cont...vigation-menu/

I've followed the steps, making the (what I thought were) necessary tweaks to the javascript for ata.
Here is the javascript:

Code:

$(function() {

    // Stick the #nav to the top of the window

    var nav = $('#nav');

    var navHomeY = nav.offset().top;

    var isFixed = false;

    var $w = $(window);

    $w.scroll(function() {

        var scrollTop = $w.scrollTop();

        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {

            nav.css({

                position: 'fixed',

                top: 0,

                left: nav.offset().left,

                width: nav.width()

            });

            isFixed = true;

        }

        else if (!shouldBeFixed && isFixed)

        {

            nav.css({

                position: 'static'

            });

            isFixed = false;

        }

    });

});

I placed the javascript in the HTML Inserts: header field. Is this where I need to put it? Or should I place it in one of the core theme files?

I changed

Code:

var nav = $('#nav');

to include first the ul# for the menu (ul#rmenu2), and when that didn't work I tried using the containing div id (menu1).

Neither is working.
I know next to nothing about javascript or jquery (it's on my todo list), so any help with this would be greatly appreciated.

Link to site: http://www.laurenacooper.com/ohprefresh

why not put the menu at the top to start and fix it with css?

HTML Code:

div#menu1 {position: fixed !important; top: 0 !important;}

Because we want the menu bar to be beneath the logo, and only stick to the top of the page as the user scrolls down.

You should contact the author of the code and ask them for advice

Ok, fair enough. Can you please tell me though if I am putting the code in the right place? HTML inserts > head? Or would I need to put it in a theme file somewhere?

That seems like the logical place, but I didn't read their documentation so I can't be 100% sure. but it should go somewhere in the 'Add HTML/CSS Inserts' options and not in a theme file.

Thanks JD. Appreciate ya :)

Here is a menu plugin that doesn't do exactly as you want but... When you scroll down a defined distance a copy of your menu appears stuck to the top. You can see an example at the link.