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


-

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

overview i want replace oracle.dataaccess orcale. managed dataaccess, opening connection latter throws ora-12537 network session end of file exception. exception message / stack trace {oracleinternal.network.networkexception (0x000030f9): ora-12537 : netzwerksession: dateiende @ oracleinternal.network.readerstream.read(orabuf ob) @ oracleinternal.ttc.orabufreader.getdatafromnetwork() @ oracleinternal.ttc.orabufreader.read(boolean bignoredata) @ oracleinternal.ttc.marshallingengine.unmarshalub1(boolean bignoredata) @ oracleinternal.ttc.ttcprotocolnegotiation.readresponse()} i trying connect oracle 11g database , not have client installed on local machine. working test application (unmanaged) using oracle.dataaccess works fine . using system; using oracle.dataaccess.client; namespace app.odp.unmanaged { internal class program { private static void main(string[] args) { //dummy connection string...
Read more

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

i want compress , decompress ecg signal stored text message text file , find out file size, cr,prd ratio,and qs. here code compression , decompression of ecg signal using huffman algorithm. i'm trying find out file size, compression ratio,prd ratio,qs. but error i'm getting the ecg file in text format. %clearing variables , screen enter code here clear all; close all; clc; [file1]=uigetfile('*.txt'); %fprintf('enter ecg file name :%s',file1); p=file1; t=sprintf('%s',p); b1=dlmread([file1]); len=length(b1); lead=input('enter lead number :'); %lead=str2double(lead); col2=b1(1:end,lead); e=fix(sqrt(len)); m=1; i=1:e j=1:e g2(i,j)=fix(col2(m)*1000); %amplifying 1000 m=m+1; end end g3=g2; i=1:e j=1:e ...
Read more

utf 8 - split utf-8 string into bytes in python -

i trying split utf-8 string bytes in python 3. problem is, when use bytearray, byte, encode etc functions array size of element 14 bytes, not 1 byte expected. need split text file sequence of bytes , send them byte after byte using sockets. tried this: infile = open (file, "r") str = infile.read() byte_str = bytes(str, 'utf-8') print("size of byte_str",sys.getsizeof(byte_str[0])) print gives me 14, need 1... suggestion? quoting official documentation : sys.getsizeof(object[, default]) return size of object in bytes. object can type of object. built-in objects return correct results, not have hold true third-party extensions implementation specific. only memory consumption directly attributed object accounted for, not memory consumption of objects refers to. if given, default returned if object not provide means retrieve size. otherwise typeerror raised. getsizeof() calls object’s __sizeof__ method , adds ...
Read more