JavaScript stopping divs at the top of a page and scrolling over them

PHr0Z3N W4t3R

New Member
I have a working piece of the code working here: http://jsfiddle.net/Tgm6Y/4302/Here is a snip-it of the jquery:\[code\] (function(window){$.fn.stopAtTop= function () { var $this = this, $window = $(window), thisPos = $this.offset().top, //thisPreservedTop = $this.css("top"), setPosition, under, over; under = function(){ if ($window.scrollTop() < thisPos) { $this.css({ position: 'absolute', top: "" }); setPosition = over; } }; over = function(){ if (!($window.scrollTop() < thisPos)){ $this.css({ position: 'fixed', top: 0 }); setPosition = under; } }; setPosition = over; $window.resize(function() { bumperPos = pos.offset().top; thisHeight = $this.outerHeight(); setPosition(); }); $window.scroll(function(){setPosition();}); setPosition();};})(window);$('#one').stopAtTop();$('#two').stopAtTop();$('#three').stopAtTop();$('#four').stopAtTop();\[/code\]However what I cannot figure out is how to scroll the div if its greater than the view able area and THEN start to scroll the div below it once its reached the bottom.For example, in #one on the page above you can see hello but never can you see the last 2 phrases (End, Start Scrolling). I've re-adjusted the CSS to have it not be 100% of the with but that still doesn't fix this issue. In JavaScript / Jquery I need to find a way to not scroll the div below it until all the data in the div is shown and then scrolling back up do the same. Any help would be appreciated.Thanks,
 
Back
Top