The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to update scrolling side menu on window resize

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #174327

    Hi guys,

    Please take a look at a site I’m developing:

    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,
            winHeight = $(window).height(),
            currentLocationHeight = $("#current-location").height() + 40;
        if (mainColHeight > sideBarHeight) {
            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.css({"right": sideBarSideOffset});
                } else if (winScroll >= (footerOffset-winHeight)) {
                    sideBar.css({"right": 0});
                } else {
                    sideBar.removeClass('fixed bottom');
                    sideBar.css({"right": 0});

    Many thanks

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.