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

How to update scrolling side menu on window resize

本文关键字：窗口 调整 菜单 何更新 更新 滚动      更新时间：2023-09-26

请看看我正在开发的网站: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()});
    }
});

而不是:

$(window).load(function() {

命名函数，像这样:

function sizeSidebar() {

则在load和resize时调用函数:

$(window).on('load resize', function() {
    sideSidebar();
});
相关文章：