i wanted have navbar on left fixed when scrolling, flexible size of screen. used following
<div class="row row-offcanvas row-offcanvas-left"> <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation" data-spy="affix" style="width: 180px;"> <ul class="nav nav-sidebar"> with data-spy="affix" make sure navbar fixed. however, since included affix have annoying effect when load site. first text on site appears low (about 300px below supposed be)... , goes place want it. think reason takes time load affix.js file , after loading put text @ right place. question therefore how can avoid this?
maybe affix bit much, since used have navbar dynamic. don't want that. guess try navbar without javascript, seemed bit tricky. navbar flexible screen size, , can't figure out how make additionally fixed against scrolling.
hi again: took me while figure out how jsfiddle works, here link
https://jsfiddle.net/carl101/rb8x80yb/2/embedded/result/
it shows navbar on left , navbar on top. working. problem if content big, site has problem described above
i not clear say. far can understand, need fixed sidebar, doesn't scroll header too. right? solution work you?
/* start praveen's reset fiddle ;) */ * {font-family: 'segoe ui'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* end praveen's reset fiddle ;) */ {text-decoration: none;} html, body {height: 100%;} body {padding-top: 50px; padding-left: 75px;} p {margin: 0 0 10px;} header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;} header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;} header h1 {font-weight: normal; color: #fff;} aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;}<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <header> <h1><a href="">heading</a></h1> </header> <aside> <nav> <ul> <li><a href="">item 1</a></li> <li><a href="">item 2</a></li> <li><a href="">item 3</a></li> <li><a href="">item 4</a></li> <li><a href="">item 5</a></li> </ul> </nav> </aside> <p>jason john gesser (born may 31, 1979) american college football coach , former player, quarterbacks coach wyoming cowboys of mountain west conference.</p> <p>he interim head coach, offensive coordinator, quarterbacks coach, , recruiting coordinator idaho vandals of wac. played quarterback washington state cougars of pac-10 under head coach mike price, , played in 2003 rose bowl. professional, gesser played utah blaze of arena football league, calgary stampeders of canadian football league, , tennessee titans of national football league. hired @ idaho running backs coach in june 2011. gesser grandson of green bay packers hall of fame member joseph "red" dunn.</p> <p>jason john gesser (born may 31, 1979) american college football coach , former player, quarterbacks coach wyoming cowboys of mountain west conference.</p> <p>he interim head coach, offensive coordinator, quarterbacks coach, , recruiting coordinator idaho vandals of wac. played quarterback washington state cougars of pac-10 under head coach mike price, , played in 2003 rose bowl. professional, gesser played utah blaze of arena football league, calgary stampeders of canadian football league, , tennessee titans of national football league. hired @ idaho running backs coach in june 2011. gesser grandson of green bay packers hall of fame member joseph "red" dunn.</p>
Comments
Post a Comment