Geek Answers Handbook

DIV position below fixed height div

Here is the problem: Let's 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, as the #top div will have different sizes. In addition, the #below div may vary in size and should scroll under the #top div.

Does anyone have any ideas how to understand this? Cheers - Chris

+4
source share
3 answers

This is pretty simple with jQuery if the top height of the div is fixed after the page is displayed.

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

This will assign the css top property of the element equal to the full height of the top element. Other layout factors may lead to the fact that this will not be the right value for the top level, in which case you will need to determine the correct way to determine the top value, but the principle is the same, and in the simple case it will work without changes.

+7
source

I created this jquery plugin to solve a similar problem that I encountered where I had the middle container (tabular data) and I wanted the header to be fixed at the top of the page when scrolling through the list (the list is variable size). One of the problems was that when the title became fixed, the content below it would bounce to the top of the page (not very good). This plugin compensates for the “fixed” element and allows the content below it to be positioned and scrolled as it should.

Here is a link to this jquery plugin that can solve this problem:

https://github.com/bigspotteddog/ScrollToFixed

The description of this plugin is as follows:

This plugin is used to fix elements at the top of the page if the element scrolls out of view, vertically; however, it allows the item to continue to move left or right by scrolling horizontally.

Given the marginTop parameter, the element will stop moving vertically upwards as soon as the vertical scroll reaches the target position; but the item will still move horizontally as the page scrolls left or right. After the page has been scrolled back, the target position passed, 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.

Use for your specific 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(); });
0
source

This is the same answer as @hemp, only with the addition of a div that constantly updates its position by placing jquery-css inside a function that executes when you resize.

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

More articles:


All Articles