javascript - Make Tabs Stick To Top Of Div -


ok i'm working on restaurant app design , want able stick tabs category names right below "now serving breakfast" block scroll down next category replace category name tab current one.

similar how instagram have username tab while scrolling down newsfeed.

http://codeclimb.com/menus2/index2.html

any ideas on javascript can done?

check out codepen

here code:

function stickytitles(stickies) {        this.load = function() {                    stickies.each(function() {                            var thissticky = jquery(this).wrap('<div class="followwrap" />');              thissticky.parent().height(thissticky.outerheight());                            jquery.data(thissticky[0], 'pos', thissticky.offset().top);                        });      }                this.scroll = function() {                stickies.each(function(i) {                            var thissticky = jquery(this),                  nextsticky = stickies.eq(i+1),                  prevsticky = stickies.eq(i-1),                  pos = jquery.data(thissticky[0], 'pos');                        if (pos <= jquery(window).scrolltop()+100) {                                    thissticky.addclass("fixed");                                    if (nextsticky.length > 0 && thissticky.offset().top >= jquery.data(nextsticky[0], 'pos') - thissticky.outerheight()) {                                            thissticky.addclass("absolute").css("top", jquery.data(nextsticky[0], 'pos') - thissticky.outerheight());                    }                                } else {                                    thissticky.removeclass("fixed");                                    if (prevsticky.length > 0 && jquery(window).scrolltop() <= jquery.data(thissticky[0], 'pos')  - prevsticky.outerheight()) {                                        prevsticky.removeclass("absolute").removeattr("style");                                    }                             }          });               }  }    jquery(document).ready(function(){        var newstickies = new stickytitles(jquery(".followmebar"));            newstickies.load();                jquery(window).on("scroll", function() {            newstickies.scroll();            });   });
body {    margin: 0;    background: #333;    color: #fff;  }  .followmebar {    background: #222;    border-bottom: solid 1px #111;    border-top: solid 1px #444;    padding: 1%;    position: relative;    z-index: 1;  }  .followmebar.fixed {    position: fixed;    top: 100px;    width: 98%;    z-index: 0;  }  .followmebar.fixed.absolute {    position: absolute;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="followmebar">a</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">b</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">c</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">d</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">e</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">f</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">g</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">h</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">i</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">j</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">k</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">l</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">m</div>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <div class="followmebar">n</div>

i modified bit since see headers have offset (i change <br>s margin top on div content wrapper ids)


Comments

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

datatable - Matlab struct computations -