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

Question

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.

Possible duplicate of [CSS position element "fixed" inside scrolling container](https://stackoverflow.com/questions/11261270/css-position-element-fixed-inside-scrolling-container) — TylerH, Oct 26 '17 at 16:52
@TylerH I guess you're right. But, why has it taken you nearly four and a half years to point this out? — SYPOMark, Oct 27 '17 at 13:07

score 1 · Accepted Answer · answered May 14 '13 at 21:34

1

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>
...

answered May 14 '13 at 21:34

Matteo B.

3,906
2
29
43

Hi Matmarbon, Exactly like that, yes. What a swift reply.Can I just ask: will the code work if the divs are classes rather than ids? – SYPOMark May 15 '13 at 14:42
Hi @MarkSyred, anybody (you?) tried that already [here](http://jsfiddle.net/gWumT/2/) - yes, that works. – Matteo B. May 15 '13 at 17:53
Hi MatMarbon, Yep, it was me. Shortly after asking the question, I thought I would have a go. Should be eperimenting with implementing it ere long. Thanks very much for your help. – SYPOMark May 15 '13 at 19:02
Hi, again. Sorry to be a pain. But I must be doing something wrong. I can't get the thing to work. I have no idea why. It may be I am invoking jQuery in the wrong place. Or maybe I'm adding in the js in the wrong place. Or I might have miss-spelled the div classes. I have no idea - well, apart from the miss-spelling, I've checked that. I've wrapped the js above in . Is that the right thing to do? Sorry, I'm sounding really thick! – SYPOMark May 15 '13 at 19:55
Hi @MarkSyred, no, thats not all. You have to put it into `jQuery(window).load(function(){[CODE HERE]});`, where `[CODE HERE]` is to be replaced by the code. – Matteo B. May 15 '13 at 22:03
Or even better `jQuery(document).ready(function(){[CODE HERE]});` – Matteo B. May 15 '13 at 22:05

score 1 · Answer 2 · answered Sep 20 '14 at 10:50

1

You could use the brand new (2014) position: sticky; value which is made exactly for this! But be aware, that it only works in FF ≥ 32.0.1 and Safari ≥ 6.1 with position: -webkit-sticky; but almost no other browsers yet.

answered Sep 20 '14 at 10:50

Matteo B.

3,906
2
29
43

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

2 Answers2