javascript - keep sticky div with same width when you scroll -

javascript - keep sticky div with same width when you scroll -

i want sticky div of same width when sticky. right contains 100% width , take total area @ top. requirement maintain within outer div.

fiddle illustration is:

js fiddle

code:

html

<div class="main-cont"> <div id="unstickyheader"> <p>this text comes before our <strong>sticky header</strong></p> <p>this text comes before our <strong>sticky header</strong></p> <p>this text comes before our <strong>sticky header</strong></p> </div> <div id="stickyheader"> <table width="100%"> <tr> <td>sticky text 1</td> <td>sticky text 2</td> <td>sticky text 3</td> <td>sticky text 4</td> <td>sticky text 5</td> </tr> </table> </div> <div id="stickyalias"></div> <div id="othercontent"> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, </p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore european union fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit, ulpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

css:

table { background: black; color: white;} body, td { font: 13px sans-serif; } .main-cont{ width:500px; border:2px solid red; } #stickyheader { width: 100%; height: 10px; } #stickyalias { display: none; height: 10px; } #unstickyheader { margin-bottom: 15px; background:yellow; width:100%; } #othercontent { margin-top: 20px; }

script: onload

$(function(){ // check initial poistion of sticky header var stickyheadertop = $('#stickyheader').offset().top; $(window).scroll(function(){ if( $(window).scrolltop() > stickyheadertop ) { $('#stickyheader').css({position: 'fixed', top: '0px'}); $('#stickyalias').css('display', 'block'); } else { $('#stickyheader').css({position: 'static', top: '0px'}); $('#stickyalias').css('display', 'none'); } }); });

any help much appreciated.

thank you

please note have used bootstrap 3 classes. 500px static utilize col-md-7 class this. need responsive cant create fix. sorry fiddle illustration of prepare width.

you can accomplish adding width:'500px stickyheader this

$(window).scroll(function(){ if( $(window).scrolltop() > stickyheadertop ) { $('#stickyheader').css({position: 'fixed', top: '0px',width:'500px'}); $('#stickyalias').css('display', 'block'); } else { $('#stickyheader').css({position: 'static', top: '0px'}); $('#stickyalias').css('display', 'none'); } });

here fiddle

check this fiddle . interactive based on width of main-cont div.

javascript jquery html