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

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 有一个 .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 语句来定位台式机和平板电脑，并将类 .slideDown 应用于导航栏，将其位置从 top: -67px; 更改为顶部: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 类永远不会添加到 #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 没有将指定的类添加到 #nav-bar 中，为什么 #nav-bar 脱离了它的父类，在 659 px 和 676 px 之间？

Answer 1

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

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

将计算max-width窗口屏幕包括 scrollbar , 但是当你打电话时

$(window).width()

它将返回窗口屏幕的宽度，不包括scrollbar。 ，当您的窗口屏幕(包括 scrollbar 如果您使用 Chrome developer tools 检查它)宽度介于 659px 之间时，是什么导致您出现意外结果？ & 676px .

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

然后使用 jQuery , 你需要检查 z-index 是否类的 CSS 值 .bar是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所以你可以调整窗口宽度