为什么我的向下滑动导航在特定 window 宽度下不起作用

Question

我的页眉中有一个 div 元素 - 我将其用作导航栏 - 它是全宽的（即： width: 100%; ）并且我正在使用 CSS jQuery 使其针对不同的设备以不同的方式运行。

导航栏的基本结构如下：

        <div id="nav-bar" class="bar">

            <div id="nav-content" class="cf">

                <div id="branding-wrap">
                    <a href="homeurl"><img src="/images/logo.png" id="logo"></a>
                </div><!-- End #branding-wrap -->

                <nav id="main-nav" class="right">

                    <?php 

                        get_search_form();

                        wp_nav_menu(array(
                            'menu' => 'Main Nav Menu',
                            'container_class' => 'menu-item'
                        )); 
                    ?>
                </nav>

                <a href="#mobile-nav"><img src="/images/menu.png" id="menu-icon" class="left"></a>
            </div><!-- End #nav-content -->
        </div><!-- End #nav-bar -->

div 有一个 class .bar 样式如下：

.bar {
top:                -67px;
width:              100%;
opacity:            0.97;
z-index:            30;
position:           fixed;
border-bottom:      solid 1px #2B292B;
background-color:   #FCFCFC;
-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    0px 2px 4px 0px rgba(0, 0, 0, 0.5);
box-shadow:         0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-webkit-transition: top 0.4s;
-moz-transition:    top 0.4s;
-ms-transition:     top 0.4s;
-o-transition:      top 0.4s;
transition:         top 0.4s;}

我使用以下 if 语句针对台式机和平板电脑，并将 class .slideDown 应用于导航栏，将其位置从 top: -67px; 更改为 top: 0; :

    var offset = $(window).scrollTop();

    if($(window).width() > 659 && offset > 10 ){

        $('#nav-bar').addClass('slideDown');

    }else{

        $('#nav-bar').removeClass('slideDown');
    }

对于移动设备，我有以下媒体查询：@media only screen and (max-width:659px){}。而且，对于低于此宽度的屏幕，我只是像这样更改了导航栏的样式：

.bar {
    top: 0;
}

不幸的是，我发现如果屏幕宽度介于 676px 和 659px 之间，.slideDown class 永远不会添加到 #nav-bar 和 #nav-bar 的宽度突破了它的父元素（也被赋予了 100% 的宽度）——起初我认为这是由于给父元素和子元素都赋予了 100% 的宽度，但这种溢出只发生在 676px 和 659px 之间。

看来我的 CSS 和 jQuery 有一个盲点，可以这么说，但是一个掉落的地方和另一个捡起的地方之间没有差距。

我的其他媒体查询也在上述媒体查询 (@media only screen and (min-width:660px) and (max-width:979px){}) 之后立即开始，并且 .bar 和 .slideDown 都未用作该媒体查询中的选择器。

我还检查了 Chrome 开发工具，但找不到它可能继承的任何冲突样式。

为什么 jQuery 没有将指定的 class 添加到 #nav-bar，为什么 #nav-bar 超出其父级，介于 659 像素和 676 像素之间？

Answer 1

这是您遇到的问题。 CSS 风格

@media only screen and (max-width:659px){}

将计算 window 屏幕的 max-width，包括 scrollbar，但是当您调用

$(window).width()

它会 return window 屏幕的宽度，不包括 scrollbar，当你的 window 屏幕（包括 scrollbar 如果你使用 Chrome developer tools) 宽度在 659px 和 676px 之间。

你需要做的是使用 CSS 作为你的基础来定义它的宽度是否为 > 659px 通过添加一些 style 到 @media only screen and (max-width:659px){} ，在你的情况下，我将 z-index 从 30 更改为 35 以检测 CSS 是否已定义 width 已经是 < 660px

然后使用jQuery，你需要检查class .bar的z-index CSS值是否为30（即表示宽度 > 659px) 或 35（这意味着另一个），然后将其用作条件 if 而不是使用 $(window).width().

这是您示例中的工作示例：

$(window).on('scroll', function () {
    var offset = $(window).scrollTop();
    if ($('.bar').css('z-index') == '30' && offset > 10) {
        $('#nav-bar').addClass('slideDown');
    } else {
        $('#nav-bar').removeClass('slideDown');
    }
});

ul li {
  display: inline-block;
}
.bar {
  top: -67px;
  width: 100%;
  height: 67px;
  opacity: 0.97;
  z-index: 30;
  position: fixed;
  border-bottom: solid 1px #2B292B;
  background-color: #FCFCFC;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  -webkit-transition: top 0.4s;
  -moz-transition: top 0.4s;
  -ms-transition: top 0.4s;
  -o-transition: top 0.4s;
  transition: top 0.4s;
}
.slideDown {
  top: 0;
}
body {
  height: 1500px;
}
@media only screen and (max-width: 659px) {
  .bar {
    top: 0;
    z-index: 35;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="nav-bar" class="bar">
    <div id="nav-content" class="cf">
        <div id="branding-wrap"> <a href="homeurl"><img src="/images/logo.png" id="logo"/></a>

        </div>
        <!-- End #branding-wrap -->
        <nav id="main-nav" class="right">
            <ul>
                <li>menu-item</li>
                <li>menu-item</li>
                <li>menu-item</li>
            </ul>
        </nav> <a href="#mobile-nav"><img src="/images/menu.png" id="menu-icon" class="left"/></a>

    </div>
    <!-- End #nav-content -->
</div>
<!-- End #nav-bar -->

注意：点击Full Page可以调整window宽度

为什么我的向下滑动导航在特定 window 宽度下不起作用

Why is my slide down navigation not working in specific window width

jquery

css

media-queries

css-animations

conditional-statements