javascript - Navigation bar is not responsive after scrolling -

-

i new web development.i met problem when designing scrolling navigation bar.

i used bootstrap grid , jquery this. if don't scroll down , resize window, fine. navigation bar resized , in center of window. after scroll down, size of navigation bar fixed. size won't change when make window larger(it smaller if make window smaller, not centered). may caused setting width: nav.width() in js file, don't know how fix it.

this new account don't have enough reputation upload images. try describe using words. example, @ beginning, parent of navigation bar 1140px, width of navigation bar 100%, size 1140px. if resize window, let width of parent 720px, navigation bar width 720px. if scroll down, callback function in js run, set width 720px, fixed value, won't responsible more. now, if resize window make parent 1140px, width of navigation bar 720px rather 1140. how fix this?

    <div class="container">         <div class="row">             <div class="col-md-12">                 <header id="home" style="height:300px">                     <nav id="nav-wrap">                         <ul id="nav" class="nav">                             <li class="current">                                 <a href="">home</a>                             </li>                             <li class="smotthscroll">                                 <a href=""> </a>                             </li>                             <li class="smotthscroll">                                 <a href=""> portfolio </a>                             </li>                             <li class="smotthscroll">                                 <a href=""> skills </a>                             </li>                             <li class="smotthscroll">                                 <a href=""> contact </a>                             </li>                         </ul>                     </nav>                 </header>             </div>         </div>       </div>

css 

 #nav-wrap {     font: 22px 'opensans-bold', sans-serif;     width: 100%;     margin: 0 auto;     left: 0;     top: 0;  }       ul#nav {     text-align: center;     padding: 0;     width: 100%;     background: rgba(0, 0, 0, 0.3);     z-index: 2; }      ul#nav li {     height: 48px;     display: inline-block; }      ul#nav li {     color:white;     padding: 8px 13px;     display: inline-block;     text-align: center; }       $(function() {     var nav = $('#nav');     var navhomey = nav.offset().top;     var isfixed = false;     var navwrap = $('#nav-wrap');     var $w = $(window);     $w.scroll(function () {         var scrolltop = $w.scrolltop();         var shouldbefixed = scrolltop > navhomey;         if(shouldbefixed && !isfixed) {             nav.css({                 position: 'fixed',                 width: nav.width()             });             isfixed = true;         }else if (!shouldbefixed && isfixed) {             nav.css({                 position: 'static'             });             isfixed = false;         }     }); });

your problem comes part. 

 var shouldbefixed = scrolltop > navhomey;         if(shouldbefixed && !isfixed) {             nav.css({                 position: 'fixed',                 width: nav.width()             });             isfixed = true;

try inversing or removing part together. saying if navbar not @ top, add position of fixed nav.width(), whatever set equal - , precisely opposite of want because it's problem according question.


Comments

Post a Comment

Popular posts from this blog

python - Healpy: From Data to Healpix map -

-
Image
i have data grid rows represent theta (0, pi) , columns represent phi (0, 2*pi) , f(theta,phi) density of dark matter @ location. wanted calculate power spectrum , have decided use healpy. what can not understand how format data healpy use. if provide code (in python obvious reasons) or point me tutorial, great! have tried hand @ doing following code: #grid dimensions nrows*ncols (subject change) theta = np.linspace(0, np.pi, num=grid.shape[0])[:, none] phi = np.linspace(0, 2*np.pi, num=grid.shape[1]) nside = 512 print "pixel area: %.2f square degrees" % hp.nside2pixarea(nside, degrees=true) pix = hp.ang2pix(nside, theta, phi) healpix_map = np.zeros(hp.nside2npix(nside), dtype=np.double) healpix_map[pix] = grid but, when try execute code power spectrum. specifically, : cl = hp.anafast(healpix_map[pix], lmax=1024) i error: typeerror: bad number of pixels if point me tutorial or edit code great. more specifications: data in 2d np array , can change numrows/...
Read more

c - Bitwise operation with (signed) enum value -

-
i using enumerator values flags: typedef enum { = 0x00, b = 0x01u, // u has no influence, expected c = 0x02u, // u has no influence, expected ... } enum_name; volatile unsigned char* reg = someaddress; *reg |= b; according misra-c:2004 bitwise operations shall not done signed type. unfortunately, compiler iar use signed int (or short or char) underlying type of enums, , option can find relates size, not signedness ("--enum-is-int"). according iar c/c++ development guide arm , pages 169 , 211, can define type of enum s if enable iar language extensions ( -e command-line option, or project > options > c/c++ compiler > language > allow iar extensions in ide). in particular, should define "sentinel" value, make sure compiler chooses correct type. prefers signed types, , uses smallest possible integer type, sentinel should largest positive integer corresponding unsigned integer type can describe. example, typedef enum ...
Read more

xslt - Unnest parent nodes by child node -

-
in xml there items 0-n attributes , item should copied each attribute new item 1 attribute. given xml this: <?xml version="1.0" encoding="utf-8" ?> <items> <item> <name>a</name> <attributes> <attribute> <key>attribute1</key> <value>1</value> </attribute> </attributes> </item> <item> <name>b</name> </item> <item> <name>c</name> <attributes> <attribute> <key>attribute1</key> <value>5</value> </attribute> <attribute> <key>attribute2</key> <value>2</value> </attribute> <attribute> <key>attri...
Read more