如何更新窗口大小的滚动侧菜单

Question

请查看我正在开发的网站：http://coccolejarvis.com/

当你到达某一点时，你会看到右手菜单。这样可以很好地节省设计中的空白区域，但问题是如果您调整浏览器窗口的大小，侧栏的宽度不会改变（它必须有一个固定的宽度才能工作）。

如何在窗口调整大小时自动计算侧栏的宽度？我现在正在使用以下代码：

$(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()});

    }

});

Answer 1

而不是：

$(window).load(function() {

命名函数，如下所示：

function sizeSidebar() {

然后在加载和调整大小时调用该函数：

$(window).on('load resize', function() {
    sideSidebar();
});