Trying to make pages menu sticky - javascript trouble?

crashley1784 · #1 Sep 25, 2012, 10:44 AM

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