Position DIV below fixed div with variable height

Question

Here is the Problem: Lets say I have something like this:

<div id="leftcontainer">
    <div id="top" style="position:fixed"></div>
    <div id="below"></div>
</div>

And I would like to have the #below div, below the #top div, but not use margin-top, since the #top div will have different sizes. Also, the #below div can vary in size, and should scroll beneath the #top div.

Does anybody have an idea how to realize that? Greets - Chris

With regard to an earlier comment, you do *not* need jQuery for this - it can be done with plan javascript and CSS. jQuery just provides cross-browser convenience methods that make it quicker to implement. — hemp, Jun 02 '14 at 04:43

hemp · Accepted Answer · 2012-03-05T06:45:05.287

This is fairly simple with jQuery if the top div's height is fixed after the page renders.

$(document).ready(function() {
    $('#below').css('top', $('#top').outerHeight());
});

That will assign the css top property of the below element equal to the full height of the top element. Other layout factors may cause that to not be the correct value for top, in which case you'll have to determine the correct way to identify the top value, but the principal is the same and in the simple case, this will work without modification.

score 1 · Answer 2 · edited Sep 13 '18 at 15:52

1

This is the same answer as @hemp, just with the addition of the div constantly updating it's position, by putting the jquery-css inside a function that runs when you resize.

    $(document).ready(function() {
        function SomeFunction() {
            $('#below').css('top', $('#top').outerHeight());
        }
        window.onresize = SomeFunction;
    });

edited Sep 13 '18 at 15:52

Community

1
1

answered May 03 '18 at 18:38

yehuda

41
4

It is bad practice to set a timer with such a low timeout period – Ilie Pandia May 03 '18 at 19:06
@Ilie Pandia You are correct. It's now inside a function that only runs when the window is resized, and not with the setInterval function. – yehuda Sep 13 '18 at 15:58

score 0 · Answer 3 · answered Aug 29 '11 at 18:05

I have created this jquery plugin to solve a similar issue I was having where I had a middle container (tabular data) and I wanted the header to fix to the top of the page when the list was scrolled (the list is variable size). One of the issues was, when the header became fixed, the content below it would jump up the page (not good). This plugin compensates for the "fixed" element and allows the content below it to position and scroll as it should.

Here is the link to this jquery plugin that may solve this problem:

https://github.com/bigspotteddog/ScrollToFixed

The description of this plugin is as follows:

This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down passed the target position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Usage for your particular case:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#top').scrollToFixed();
});

Position DIV below fixed div with variable height

3 Answers3

Linked