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

i have divelement in header - using navigation bar - full width (i.e.: width: 100%; ) , i'm using css , jquery make behave different ways different devices.

the basic structure of navigation bar so:

        <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 --> 

the div has class .bar styled follows:

.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;} 

i use following if statement target desktops , tablets, , apply class .slidedown navigation bar, changing it's position top: -67px; top: 0;:

    var offset = $(window).scrolltop();      if($(window).width() > 659 && offset > 10 ){          $('#nav-bar').addclass('slidedown');      }else{          $('#nav-bar').removeclass('slidedown');     } 

for mobile devices have following media query: @media screen , (max-width:659px){}. and, screens fall under width have changed styling of navigation bar so:

.bar {     top: 0; } 

unfortunately, have found if screen width falls between 676px , 659px, .slidedown class never added #nav-bar , width of #nav-bar breaks out of parent element (which given 100% width) - @ first thought due giving both parent , child elements 100% widths, overflow occurs between 676px , 659px.

it appears css , jquery have blindspot, speak, there's no gap between 1 drops off, , other picks up.

my other media query picks right after aforementioned 1 (@media screen , (min-width:660px) , (max-width:979px){}) , neither .bar nor .slidedown used selectors in media query.

i checked chrome dev tools , couldn't find conflicting styles might have inherited.

why jquery not adding specified class #nav-bar, , why #nav-bar breaking out of parent, between 659 px , 676 px?

here's problem get. css style

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

will calculate max-width of window screen including scrollbar, when call

$(window).width() 

it return width of window screen excluding scrollbar, there caused have unexpected results when window screen (including scrollbar if check using chrome developer tools) width between 659px & 676px.

what need use css base define if width > 659px or not adding style @media screen , (max-width:659px){}, in case changing z-index 30 35 detect if css has defined width < 660px

then using jquery, need check whether z-index css value of class .bar 30 (which means width > 659px) or 35 (which mean other), use conditional if rather using $(window).width().

here's working example 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 screen , (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 full page can resize window width