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

在移动视图中查看网站时会发现以下情况：

导航的可折叠部分保持“裸露”而没有黑色背景。我想要的是获得以下效果：

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

Answer 1

将代码放入更普遍使用的内容（如JSfiddle或CodePen）会更好。

由于我没有使用Pastebin帐户并且无法轻松运行代码，因此我会猜测。根据我在此处看到的内容，因为您的导航正在获得具有固定.fixed的{{1}}课程，因此您不会在菜单后面获得黑色背景，因为它只有height: 50px;高。

尝试将其更改为50px，假设高度为50px，然后才会获得height: auto;。我还要在其上添加.fixed，因为当transition: height Xs;设置为height时，它会＆＃34;成长＆＃34;覆盖菜单。

修改

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

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

.fixed

因此，点击$(function() { $('.navbar-toggler').click(function() { $('nav').css('height', 'auto'); }); })后，我们会将.navbar-toggler添加到height: auto;。

这对我来说在测试时起作用，只要让导航栏扩展到包含菜单项而不会达到完整的浏览器高度。

我认识到从nav拉出bottom: 0会导致与nav相关的展示位置问题，但我不明白为什么要将#screen1放在其中部分无论如何。我会把它放在nav和#section1之间。

您可以将#section2的高度更改为#section1，以便导航栏完全适合屏幕底部。

动态调整高度

1 个答案: