How to update scrolling side menu on window resize

[Historical Forums User]

Hi guys,

Please take a look at a site I’m developing: http://coccolejarvis.com/

You will see the right hand menu sticks when you reach a certain point. This works well to save white space in the design, but the problem is if you resize the browser window the width of the side bar does not change (it has to have a fixed width to work).

How can I make it autocalculate the width of the side bar upon the window resizing? I’m using the below code for now:

    $(window).load(function() {

    var sideBar = $('.side-nav'),
        sideBarSideOffset = $('#page-main').offset().left,
        mainColHeight = $('.main-col').height(),
        sideBarHeight = sideBar.height(),
        sideBarWidth = sideBar.width(),
        footerOffset = $('footer').offset().top,
        contentOffset = $('#page-main').offset().top,
        yOffset,
        winHeight = $(window).height(),
        currentLocationHeight = $("#current-location").height() + 40;

    if (mainColHeight > sideBarHeight) {

        sideBar.addClass('absolute-position');

        sideBar.css({"width": sideBarWidth});

        function fixSideBar() {

            yOffset = yOffset ||  $("#current-location").offset().top;
            var winScroll = $(window).scrollTop();

            if (winScroll >= yOffset-winHeight +currentLocationHeight && winScroll<footerOffset-winHeight) {
                sideBar.removeClass('bottom').addClass('fixed');
                sideBar.css({"right": sideBarSideOffset});
            } else if (winScroll >= (footerOffset-winHeight)) {
                sideBar.removeClass('fixed').addClass('bottom');
                sideBar.css({"right": 0});
            } else {
                sideBar.removeClass('fixed bottom');
                sideBar.css({"right": 0});
            }

        }

        fixSideBar();
        $(window).scroll(function(){fixSideBar()});

    }

});

Many thanks

[Author]

Posts