Search code examples
jquerycss-positiontabbed-browsing

Fixed position div within a parent div to prevent the child div scrolling down the page

As I have had such quick and relevant help on here before now, I thought I would come back with another query.

I like 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 by MicronXD.

I'm looking for a div to scroll until the top of it hits the top of the screen and then for it to stay fixed there until it hits the top of the div below it, in my case, the footer of the document.

The parent div does not have a specified height, but is determined by the page content.

Forgive me if this has been answered elsewhere, but in my searching, I couldn't find anything that quite fitted what I'm after.

Many thanks in advance,

Mark

I have added the code as suggested in Matmarbon's jsfiddle below and wrapped it in the code given in his comment. Sadly all I have been able to achieve is that the child element does indeed stay fixed, and only when the top of it hits the top of the screen, but when it meets the div below, where it is supposed to stop, it keeps going and overlaps it.

I would obviously like some more help, but don't know what to do about getting any. Should I redirect you to the page I am attempting to achieve this on. It's http://piciscan.co.uk/experiment/slide-scanning-service in case it helps.

I'm at quite a loss and would appreciate some more help. Thanks in advance.

Mark

[EDITED 2013-05-17 10:09:53]

RIGHT!!! SORTED IT!!! I have on the above mentioned page, tabbed navigation showing different options to customers for having their slides scanned. This runs on js and requires

<body onload="init()">

for it to work. Removing that bit of code makes the scrolling div work as desired. Sadly, it removes the function of the tabbed navigation. But, no matter, I have found another way of producing tabbed navigation that does not require the 'onload' function to work.

In case anyone is interested, it looks like this:

First, the javascript, positioned in the 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 the 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 some information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page2" class="content">

    <h2>Here's some more information</h2>

    blah<br>blah<br>blah

    </div>

    <div id="page3" class="content">

    <h2>And some 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 a        {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, the jQuery:

<script type="text/javascript">

$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );
});

</script>

Hopefully that will help someone.

Solution

  • Like this (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>
...