javascript - 动态调整高度

Question

我的代码中有以下代码片段，可帮助我实现滚动时固定顶部导航。

HTML:

<nav>
    <button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
        <img class="navbar-brand" src="pics/logonavigation.png"/>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#navigation">HOME</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#about">ABOUT</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#services">OUR SERVICES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link smoothScroll" href="#contact">CONTACT US</a>
            </li>
        </ul>
    </div>
</nav>

JavaScript:

    <script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - $('nav').height();
             if ($(window).scrollTop() > navHeight) {
                 $('nav').addClass('fixed');
             }
             else {
                 $('nav').removeClass('fixed');
             }
        });

       $('.navbar-toggler').click(function() {
        var newHeight = $('nav').height();
            $(".fixed").height(newHeight);
       });
    });
</script>

CSS:

.fixed {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
z-index: 1;
height: 50px;
}

可以找到整个文件pastebin HERE

我正在使用 bootstrap v4

在移动 View 中查看站点，观察到以下内容:

导航的可折叠部分是“裸”的，没有黑色背景。我想要的是得到下面的效果:

我不能使用“navbar”类，因为它会以某种方式干扰固定顶部导航滚动。如何让移动 View 中导航的可折叠部分的背景显示为黑色？我尝试使用 jquery 动态调整 .fixed 的高度，但它不起作用。

Answer 1

最好将您的代码放入更普遍使用的东西中，例如 JSfiddle 或 CodePen。

由于我没有 Pastebin 帐户并且无法轻松运行代码，所以我会猜测一下。根据我在这里看到的情况，因为您的导航正在获得具有固定 height: 50px; 的 .fixed 类，所以您不会得到后面的黑色背景菜单，因为它只有 50px 高。

尝试将其更改为 height: auto;，假设在它获得 .fixed 之前高度为 50px。我还要在上面添加一个 transition: height Xs; 因为当 height 设置为 auto 时，它会“增长”以覆盖菜单。

编辑

这里的一个大问题是您在 .nav 上声明了 top 和 bottom 值。这导致了 .fixed 导航的全高。所以删除它。

然后将 jQuery 的后半部分更改为:

$(function() {
  $('.navbar-toggler').click(function() {
    $('nav').css('height', 'auto');
  });
})

所以当 .navbar-toggler 被点击时，我们添加 height: auto; 到 nav。

这在测试时对我有用，就让导航栏展开以包含菜单项而不用达到整个浏览器高度。

我知道从 nav 中拉出 bottom: 0 会导致与 #screen1 相关的位置问题，但我不明白为什么无论如何，您都将 nav 放在该部分中。我会把它放在 #section1 和 #section2 之间。

您可以将 #section1 的高度更改为 calc(100vh - 50px)，以便导航栏完全适合屏幕底部。