javascript - Expanding Sticky sidebar with fixed position: push down content, how -

-

i have sidebar want sticky when hits header - wrote script gives fixed class when scroll reaches correct position, gave fixed position. sp far good- sidebar has expanding column, , being fixed expandes sidebar down , out of page.

how can make stick still push content down?

you can not using pure css because:

an element position: fixed; positioned relative viewport, means stays in same place if page scrolled. top, right, bottom, , left properties used position element.

a fixed element not leave gap in page have been located.

so out of document's flow but can use js achieve want this:

$(document).ready(function () {      $('#expander').click(function () {          $('.content').toggleclass('nav-expanded');      })  });
.navbar {      position: fixed !important;      width: 100%;  }  p {      text-align: center;  }  .header{      padding: 10px;  }  .content {      padding-top: 60px;      transition: .35s;  }  .nav-expanded {      padding-top: 165px;  /*you can change value more accuracy */  }    .navbar-ex1-collapse{      width: 100%;  }    .list-group .list-group-item{      background: #f8f8f8 !important;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default" role="navigation">      <div class="header">           <a href="#">logotipo</a>            <button id="expander" type="button" class="btn btn-success" data-toggle="collapse" data-target=".navbar-ex1-collapse">click me</button>      </div>      <div class="collapse navbar-ex1-collapse">          <ul class="list-group">              <li class="list-group-item"><a href="#">enlace #1</a>                    <li class="list-group-item"><a href="#">enlace #2</a>            </ul>      </div>  </nav>  <div class="content">      <p>1</p>      <p>2</p>      <p>3</p>      <p>4</p>      <p>5</p>      <p>6</p>      <p>7</p>      <p>8</p>      <p>9</p>      <p>q</p>      <p>w</p>      <p>e</p>      <p>r</p>      <p>t</p>      <p>y</p>      <p>u</p>      <p>i</p>      <p>o</p>      <p>p</p>      <p>a</p>      <p>s</p>      <p>d</p>      <p>f</p>      <p>g</p>      <p>h</p>      <p>j</p>      <p>k</p>      <p>l</p>      <p>z</p>      <p>x</p>  </div>

the idea when click button expand header(or whatever use that) setting padding-top on content equal height of header expanded. can compute height of navbar in js using .outerheight() , setting height padding-top of .content make more accuracy, use of important in snippet because bootstrap's styles overwrite mines in general not needed.

i hope idea may use it.


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d...
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea...
Read more

python - build a suggestions list using fuzzywuzzy -

-
i building suggestion engine database. i'm using fuzzywuzzy module match user input string existing database shown below. if request.method == "get": display_dict = {} user_input = request.get["user_input"] # user input match_dict = {} food_items_obj = food_items.objects.all() # fetch objects table items in food_items_obj : match = fuzz.ratio(user_input.lower(),items.name.lower()) # try match user input existing names match_dict[match] = items.name # put 1 dictionary matched_dict = ordereddict(sorted(match_dict.items(),reverse = true)) # sort dictionary if max(matched_dict.keys()) == 100: # if exact match put in dict , return display_dict[100] = matched_dict[100] else : # if not found try best matching words.. ###########this part need help! ############# k,v in matched_dict.items(): if user_input in v : display_dict[k]...
Read more