scrollTop suddenly not working for sticky menu

Question

I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).

Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?

Live site at http://adammarshalltherapy.com

Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.

$(function(){
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
                    $('#block-bcf53bf14093931c').css({display: 'block'});
            } else {
                    $('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
                    $('#block-bcf53bf14093931c').css({display: 'none'});
            }
    });
});

Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.

NOTE: The site is built on WordPress, so no-conflict mode is in effect.

Answer 1

I think you are initialising the sticky menu function before you set the min-height of $('big-div') .

On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop , it is stored at 54px. Then on your scroll event you are comparing against this.

Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.

Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:

function stickyNav() {
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;

    $(window).unbind('scroll', scrollEvent);
    $(window).on('scroll', stickyRibbonTop, scrollEvent);
};

function scrollEvent(event) {
    var stickyRibbonTop = event.data;
    if ($(window).scrollTop() > stickyRibbonTop) {
        $('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
        $('#block-bcf53bf14093931c').css({ display: 'block' });
    }
    else {
        $('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
        $('#block-bcf53bf14093931c').css({ display: 'none' });
    }
};

function wrapper_height() {

    var height = $(window).height();
    var wrapperheight = height - 75;
    wrapperheight = parseInt(wrapperheight) + 'px';
    $(".bigDiv").css('min-height', wrapperheight);
    $("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);

    stickyNav();
}
$(function () {
    wrapper_height();
    $(window).bind('resize', wrapper_height);
});