如何在内联创建对象时引用父级？(How to reference parent in inline creation of objects?)

 这是你得到的问题。 CSS风格 
 
@media only screen and (max-width:659px){}
 
 将计算窗口屏幕的max-width ，包括scrollbar ，但是当你打电话时 
 
$(window).width()
 
 它将返回除scrollbar之外的窗口屏幕的宽度，当您的窗口屏幕（包括使用Chrome developer tools检查它的scrollbar ）宽度介于659px和676px之间时，会导致您出现意外结果。 
 
 您需要做的是使用CSS作为基础，通过在@media only screen and (max-width:659px){}添加一些style @media only screen and (max-width:659px){}来定义宽度是否> 659px ，在您的情况下我正在改变z-index从30到35来检测CSS是否已定义width已经< 660px 
 
 然后使用jQuery ，你需要检查类.bar的z-index CSS值是30 （表示宽度> 659px）还是35 （表示另一个），然后使用它作为条件而不是使用$(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以便可以调整窗口宽度 

Here's the problem that you get. The CSS style 
 
@media only screen and (max-width:659px){}
 
will calculate the max-width of the window screen including the scrollbar, but when you call
 
$(window).width()
 
it will return the width of the window screen excluding the scrollbar, there what caused you to have unexpected results when your window screen (including the scrollbar if you check it using the Chrome developer tools) width is between 659px & 676px.
 
What you need to do is to use the CSS as your base to define if it width is > 659px or not by adding some style to the @media only screen and (max-width:659px){}, in your case I was changing the z-index from 30 to 35 to detect if the CSS has defined that the width is already < 660px
 
Then using the jQuery, you need to check whether the z-index CSS value of class .bar is 30 (which means that the width is > 659px) or 35 (which mean the other), then use it as the conditional if rather than using the $(window).width().
 
Here's the working example from your example: 
 
 
 
 
 
  
$(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 -->
 
 
 
 
 
Note: Click the Full Page so you can resize the window width