jquery - Fixed position div within a parent div to prevent the child div scrolling down the page -
as have had such quick , relevant on here before now, thought come query.
i this: http://jsfiddle.net/tgm6y/4624/
var windw = this; $.fn.followto = function ( elem ) { var $this = this, $window = $(windw), $bumper = $(elem), bumperpos = $bumper.offset().top, thisheight = $this.outerheight(), setposition = function(){ if ($window.scrolltop() > (bumperpos - thisheight)) { $this.css({ position: 'absolute', top: (bumperpos - thisheight) }); } else { $this.css({ position: 'fixed', top: 0 }); } }; $window.resize(function() { bumperpos = pos.offset().top; thisheight = $this.outerheight(); setposition(); }); $window.scroll(setposition); setposition(); }; $('#one').followto('#two'); as provided micronxd.
i'm looking div scroll until top of hits top of screen , stay fixed there until hits top of div below it, in case, footer of document.
the parent div not have specified height, determined page content.
forgive me if has been answered elsewhere, in searching, couldn't find quite fitted i'm after.
many in advance,
mark
i have added code suggested in matmarbon's jsfiddle below , wrapped in code given in comment. sadly have been able achieve child element indeed stay fixed, , when top of hits top of screen, when meets div below, supposed stop, keeps going , overlaps it.
i more help, don't know getting any. should redirect page attempting achieve on. it's http://piciscan.co.uk/experiment/slide-scanning-service in case helps.
i'm @ quite loss , appreciate more help. in advance.
mark
[edited 2013-05-17 10:09:53]
right!!! sorted it!!! have on above mentioned page, tabbed navigation showing different options customers having slides scanned. runs on js , requires
<body onload="init()"> for work. removing bit of code makes scrolling div work desired. sadly, removes function of tabbed navigation. but, no matter, have found way of producing tabbed navigation not require 'onload' function work.
in case interested, looks this:
first, javascript, positioned in head:
<script type="text/javascript"> var previoustab="" function showme(cid){ if (document.getelementbyid){ if (previoustab!="") document.getelementbyid(previoustab).style.display="none" document.getelementbyid(cid).style.display="block" previoustab=cid return false } else return true } function loadform(){ showme("page1") } if (window.addeventlistener) window.addeventlistener("load", loadform, false) else if (window.attachevent) window.attachevent("onload", loadform) else if (document.getelementbyid) window.onload=loadform </script> now html:
<ul id="tabs"> <li><a href="#firstinfo" onclick="return showme('page1')" class="selected"> first info</a></li> <li><a href="#secondinfo" onclick="return showme('page2')"> second info</a></li> <li><a href="#thirdinfo" onclick="return showme('page3')"> third info</a></li> </ul> <div id="tabwrapper"> <div id="page1" class="content"> <h2>here's information</h2> blah<br>blah<br>blah </div> <div id="page2" class="content"> <h2>here's more information</h2> blah<br>blah<br>blah </div> <div id="page3" class="content"> <h2>and more information</h2> blah<br>blah<br>blah </div> </div> the accompanying css:
ul#tabs {list-style: none; margin: 30px 0 0 0; padding: 0 0 3px 0;} ul#tabs li {display: inline;} ul#tabs li {color: #42454a; background-color: #dedbde; border: 0; padding: 0.3em;} ul#tabs li a:hover {background-color: #f1f0ee;} ul#tabs li a.selected {color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em;} #tabwrapper {border: 0; padding: 0.5em; background-color: #f1f0ee;} .content {display: none;} and, finally, jquery:
<script type="text/javascript"> $(document).ready( function() { $("a").click( function() { $(".selected").removeclass("selected"); $(this).addclass("selected"); } ); }); </script> hopefully someone.
like (jsfiddle)?
... bumperpos = $bumper.offset().top, startingpos = $this.offset().top, defaultpostype = $this.css('position'), thisheight = $this.outerheight(), setposition = function(){ if ($window.scrolltop() > (bumperpos - thisheight - startingpos)) { $this.css({ position: 'absolute', top: (bumperpos - thisheight - startingpos) }); } else if ($window.scrolltop() < (startingpos)) { $this.css({ position: defaultpostype, top: startingpos }); } else { $this.css({ position: 'fixed', top: 0 }); } }; ... ... #zero { width:100%; height: 200px; background-color: yellow; } #one { width:100%; height: 200px; background-color: aqua; } ... ... <div id="zero">content above</div> ...
Comments
Post a Comment