jquery - How to make part of a flexbox layout become sticky? -
i have decided switch flexbox layout project, , here problem : have div becoming sticky on top of page when scrolling down, div containing flexbox elements.
practically, div contain nav menu, complicated enough me need flexboxes. want nav menu scroll up, stick top. classic behavior...
i know flexbox , fixed position don't mix well, yet i'm still wondering if there way make div containing flexboxes sticky, without destroying flex layout inside it.
let's div moves grey bar in website : look @ grey bar scrolling up , let's grey bar must contain flexboxes !
my first tests made using jquery basic solution provided here. destroys flex layout. 2013 plugin following (link on page) doesn't either.
any idea how such sticky behavior without giving on flex content ?
thx lot clue or alternative solution !
function sticky_relocate() { var window_top = $(window).scrolltop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#wrapper').addclass('stick'); } else { $('#wrapper').removeclass('stick'); } } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); });/* layout css */ .flexbox { display: flex; height: 200px; } .left_side { width: 200px; } .right_side { flex: 1; } #left1 {background-color:red;} #right1 {background-color:blue;} #left2 {background-color:green;} #right2 {background-color:black;} #contents { background-color:orange; height: 1000px; } /* sticky css */ #wrapper.stick { position: fixed; top: 0; z-index: 10000; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="flexbox1" class="flexbox"> <div id="left1" class="left_side"></div> <div id="right1" class="right_side"></div> </div> <div id="sticky-anchor"></div> <div id="wrapper"> <div id="flexbox2" class="flexbox"> <div id="left2" class="left_side"></div> <div id="right2" class="right_side"></div> </div> </div> <div id="contents"> lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. nec discere accusam recusabo, usu iudico habemus ponderum ex. cu vis vitae libris temporibus, pri simul nominavi et. no omittantur disputationi vis, pro ei putent noluisse eleifend. utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/> sit et error alterum. euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. eos ea labores adolescens consetetur. ex ius inermis percipit theophrastus, sed id agam expetendis.<br/> ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. ei alii probo timeam vix, vim ad erat magna. ne qui posse dicta labores. sea ut eius percipit. mel et nullam praesent forensibus. purto comprehensam qui ex, facer mandamus principes @ vix.<br/> alii doctus audire qui at. dicunt sapientem et mei, per @ falli fierent. et case singulis cum, et natum expetendis sea. deleniti deseruisse vel ne. pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. eam qualisque quaerendum, sale homero perpetua eam. ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/> ut aperiri feugiat elaboraret sed, nec nihil choro tibique. tale regione accumsan ex sea. mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. in clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. tation aliquid eu est, dolorem molestie assentior ea vis. minimum percipit @ mea, vel mollis ornatus imperdiet eu. te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae. </div>
there no incompatibility when flexbox container has fixed positioned parent.
the problems code are:
position: fixedremoves element flow, following elements jump take space. can counteract adding bottom margin previous element.- when fixed positioned element has
width,left,rightsetauto, width minimum required content, instead of width of containing block.
so can use:
var cond = $(window).scrolltop() > $('#sticky-anchor').offset().top; $('#wrapper').toggleclass('stick', cond); $('#sticky-anchor').css({ marginbottom: cond ? $('#wrapper').outerheight() + 'px' : 0 }); #wrapper.stick { position: fixed; top: 0; left: 0; right: 0; } function sticky_relocate() { var cond = $(window).scrolltop() > $('#sticky-anchor').offset().top; $('#wrapper').toggleclass('stick', cond); $('#sticky-anchor').css({ marginbottom: cond ? $('#wrapper').outerheight() + 'px' : 0 }); } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); });/* layout css */ body { margin: 0; } .flexbox { display: flex; height: 200px; } .left_side { width: 200px; } .right_side { flex: 1; } #left1 {background-color:red;} #right1 {background-color:blue;} #left2 {background-color:green;} #right2 {background-color:black;} #contents { background-color:orange; height: 1000px; } /* sticky css */ #wrapper.stick { position: fixed; top: 0; left: 0; right: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="flexbox1" class="flexbox"> <div id="left1" class="left_side"></div> <div id="right1" class="right_side"></div> </div> <div id="sticky-anchor"></div> <div id="wrapper"> <div id="flexbox2" class="flexbox"> <div id="left2" class="left_side"></div> <div id="right2" class="right_side"></div> </div> </div> <div id="contents"> lorem ipsum dolor sit amet, sonet tritani mnesarchum in nam, ut dicit equidem perfecto vim. nec discere accusam recusabo, usu iudico habemus ponderum ex. cu vis vitae libris temporibus, pri simul nominavi et. no omittantur disputationi vis, pro ei putent noluisse eleifend. utroque definiebas suscipiantur mea an, placerat postulant suscipiantur mel ad.<br/> sit et error alterum. euismod accusamus argumentum pro id, agam aeterno ex per, nam ex quas tantas repudiare. pri id paulo consequuntur, doctus omittam maluisset ad ius, ne aliquam ceteros duo. eos ea labores adolescens consetetur. ex ius inermis percipit theophrastus, sed id agam expetendis.<br/> ea pro iudico sanctus, vide ferri postulant ne pro, no per officiis splendide. ei alii probo timeam vix, vim ad erat magna. ne qui posse dicta labores. sea ut eius percipit. mel et nullam praesent forensibus. purto comprehensam qui ex, facer mandamus principes @ vix.<br/> alii doctus audire qui at. dicunt sapientem et mei, per @ falli fierent. et case singulis cum, et natum expetendis sea. deleniti deseruisse vel ne. pro exerci iuvaret civibus ut, pri wisi pertinax dissentiet at, exerci efficiantur mel ne. eam qualisque quaerendum, sale homero perpetua eam. ius ut odio justo saperet, usu ei epicurei aliquando, elit mucius qui cu.<br/> ut aperiri feugiat elaboraret sed, nec nihil choro tibique. tale regione accumsan ex sea. mel no natum putant, amet civibus necessitatibus sit an, commodo appellantur in vim. in clita primis vix, mea honestatis concludaturque ut, sit illum atqui eruditi ei. tation aliquid eu est, dolorem molestie assentior ea vis. minimum percipit @ mea, vel mollis ornatus imperdiet eu. te est labitur maiorum, nec ne exerci ridens, no pro habeo sanctus ancillae. </div>
Comments
Post a Comment