I'm implementing infinite scroll. Everything works, but when I try to scroll back the floating bar jumps to the top of the body. I know this is because work section doesn't have relative position, but if I add it then another problem appears - the floating bar jumps to the bottom of the work section (because the top offset is calculated from the work section top, not body)Example: http://jsfiddle.net/XC6Tz/3/HTML:\[code\]<div id="wrapper"> <section id="about"> <h2>About Me</h2></div><section id="work"> <!-- <div id="bar-wrap"> --> <div id="floating-bar"> <h2>Floating bar</h2> <p id="echo1"></p> </div> <!-- </div> --> <div id="work-prieview"> <h2>Work preview</h2> </div> <div id="works"> <h2>Works</h2> <p id="echo2"></p> </div> </div> <section id="contact"> <h2>Contact Me</h2> </div> </div>\[/code\]CSS\[code\] /* GLOBAL */ /* -------------------------------------------------------------- */ html, body, div, span, img, ul, li, h1, h2, h3, h4, h5, h6, p, a, hr, form, label, input, textarea, button, header, footer, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } header, footer, nav, section { display: block; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } body { font: 14px"Helvetica Neue", Helvetica, Arial, Sans-Serif; color: #FFFFFF; } section h2 { font-size: 54px; padding: 50px 0 0 50px; } section p { font-size: 30px; margin: 0 0 50px 50px; } /* CONTENT */ /* -------------------------------------------------------------- */ #about { height: 800px; background-color: #0054a6; } #work { } #bar-wrap { position: absolute; width: 100%; } #floating-bar { position: absolute; width: 100%; height: 180px; background: #00a651; } #work-prieview { padding-top: 180px; height: 1600px; background-color: #ed1c24; } #works { height: 800px; background: #0054a6; } #contact { height: 1600px; background: #ed1c24; }\[/code\]Javascript\[code\] $(document).ready(function () { var top = $('#floating-bar').offset().top; var bottom = $('#works').offset().top - 180; $(window).scroll(function () { y = $(window).scrollTop(); $('#echo1').text(y); if (y > top) { $('#floating-bar').css({ position: 'fixed', top: 0 }); if (y > bottom) { $('#floating-bar').css({ position: 'absolute', top: $('#works').offset().top - 180 }); } } else { $('#floating-bar').css({ position: 'absolute', // top: 0 }); } }); $('#echo2').text(bottom); });\[/code\]