Question

创建ASP.NET MVC应用程序时，它会自动生成一个默认的导航栏布局，左上角有几个菜单项，并且＆＃34;登录＆＃34;菜单项位于右上角。

默认情况下，页面内容从导航栏后面开始。正如许多帖子所建议的那样，罪魁祸首是navbar-fixed-top类，并且必须在特定于站点的css文件中为padding-top样式添加body。

我选择了适当的顶部填充尺寸，它看起来效果很好。

当您开始缩短桌面浏览器的宽度时会出现问题。有一次，＆＃34;登录＆＃34;菜单项滚动到下一行。我指定的填充大小不再有效。

我想知道是否有办法根据导航栏高度动态设置填充大小。或者，也许有一种方法可以根据导航栏的当前状态定义两种不同的填充大小？希望我可以在我的site.css文件或我的主布局文件中应用这个技巧，这样我就不需要修改每个页面了。问候。

Answer 1

这是我解决同样问题的代码，我不确定是否保留它，也许它可以帮到你。

(function ($) {

    var lastNavBarHeight = 100;

    checkSize(); // init
    $(window).resize(checkSize);

    // changes size of padding to the nav.navbar when responsive changes are fired
    function checkSize() {
        var navHeight = $("nav.navbar").height();

        if (navHeight !== lastNavBarHeight) {
            $("body").css("padding-top", navHeight + "px");
            lastNavBarHeight = navHeight;
        }
    }
}(jQuery));

如何根据导航栏高度计算体填充？

1 个答案: