Stack element above fixed element with JS/CSS

Question

I am writing a bit of Javascript code into pages that prepends a div to the body that is supposed to remain at the top of the document or window, regardless of what design/content the page has, and was working fine until came across a header element fixed top.

What I'm trying to accomplish with CSS/JS only, is to keep the jsbar at the top no matter what. If there's elements on the page such as in the example, the jsbar should be stacked above the element(s) not over or under like layers. In other words, if there is something fixed top:0, shift it down the height of jsbar, making the new top=0+heightofjsbar for all other elements.

See raw basic example of the problem: http://jsfiddle.net/XEZ5R/

<div class="jsbar">This is dynamically created jsbar</div>
<div class="page">
<header>The header bar</header>
<div class="content">the content here </div>
</div>

.page {
    position:relative;
    top:0;
    background:#f8f8f8;
    height:900px;
}
header {
    position:fixed;
    top:0;
    background:#eee;
    height:10px;
}
.jsbar {
    position:fixed;
    top:0;
    background:#ccc;
    height:10px;
}

I would appreciate any ideas to fix this. The less I tamper with the page the better. The jsbar is written into all kinds of websites with all kinds of designs/elements.

Thank you.

UPDATE: Here is an example of the desired result: http://jsfiddle.net/Zzat9/1/ (view result, disregard html/css)

Also... I can only use Javascript, no jQuery, and I only have control of the Javascript and CSS that I output/prepend at the top of the document... I have no control over anything else. So for the examples here... consider everything other than jsbar as the owners page/content/elements.

My thinking is it's going to take some Javascript that will look for elements that have position:fixed or absolute relative to the document, and then move them down the height of the jsbar. Something like: how to query whole DOM for elements matching some computed style ? (in pure js)

UPDATE 2:

I have come up with this bit Javascript that does what is needed:

var docelements = document.querySelectorAll('header, div, section');
var jsbarheight = '25px';
for (var i=0, max=docelements.length; i < max; i++) 
{
    if(window.getComputedStyle(docelements[i],null).getPropertyValue('position')=='fixed')
    {
        var fixedelement = docelements[i];
        if(window.getComputedStyle(fixedelement,null).getPropertyValue('top')=='0px')
        {      
            fixedelement.style.top=jsbarheight;
            document.body.style.paddingTop=jsbarheight;
        }
    }
}

But is this the most efficient? Anyone see any issues with this? Immediate downside is the delay in which the adjustments are made.

So, you want your header fixed, but you want it to scroll down if the `jsbar` overlaps it? — Nicholas Hazel, Jan 23 '14 at 03:33
Also, will `jsbar` constantly be there? or is it for alerts and such? — Nicholas Hazel, Jan 23 '14 at 03:36
The jsbar will always be there. I'm going to mock up a jsfiddle of what the desired result should be. — Chris, Jan 23 '14 at 03:51

Marcatectura · Answer 1 · 2014-01-23T05:01:03.113

0

Sorry if you can't use jQuery, but maybe this will still get you started on a JS solution:

var height = $('.jsbar').outerHeight(true);
$('.page').css("margin-top", height+"px");

This makes the margin-top of the .page element whatever the height of your .jsbar is. You can see the jsfiddle here: http://jsfiddle.net/Koubenec/Wm6k6/9/

Hope this helps!

EDIT:

Ok, JS only code:

var finder = document.getElementsByClassName("jsbar")[0];
var findrheight = finder.clientHeight;
var main = document.getElementsByClassName("page")[0];
main.style["margin-top"] = findrheight+"px";

This works in this jsfiddle: http://jsfiddle.net/Koubenec/7j5cL/2/

I think you might still want a few elements moved around, but this JS function gets the height of the jsbar and then adds a margin of that size to the top of the page element, so it is pushed down. You could easily adjust to position the header accordingly if you need to.

EDIT: take 3-

var finder = document.getElementsByTagName("div")[0];
var findrheight = finder.clientHeight;
var main = document.getElementsByTagName("header")[0];
main.style["margin-top"] = findrheight+"px";

This code just finds the first tag element, gets its height, then finds the first element and gives it a margin-top equal to the jsbar's height. That way, you need no IDs or Class names for it to work. Here's another jsfiddle: http://jsfiddle.net/Koubenec/7j5cL/3/

edited Jan 23 '14 at 05:01

answered Jan 23 '14 at 03:32

Marcatectura

1,721
5
30
49

Thanks, but I can only use JS, no jQuery. Also, the result should be the jsbar behaving just like the header, only stacked above it. In your example, the jsbar is scrolling with the page, leaving a gap above header. – Chris Jan 23 '14 at 03:48
Oh I see, so the jsbar should be hiding the header? – Marcatectura Jan 23 '14 at 03:54
Please refer to the fiddle link in the update to see example of what is wanted. Thanks – Chris Jan 23 '14 at 04:04
Thank you. In this example, it is the
with fixed position that is in the way. The page is just there... It's a really basic mockup of an actual site's code. How would you adjust this to target the fixed header element? And more importantly, without knowing any elements ID or Class. This jsbar will be going on many different sites.
– Chris Jan 23 '14 at 04:48
If you don't know IDs or Classes, I suppose you could count the elements and adjust their style depending on if they're 0,1,2 etc in an array, but will the order of every page always be ,
, ?
– Marcatectura Jan 23 '14 at 04:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45858/discussion-between-marcatectura-and-chris) – Marcatectura Jan 23 '14 at 05:01
@Marcatectura Thank you again for trying to help. I appreciate it very much. As discussed in chat, it's more complicated than initially seems. – Chris Jan 23 '14 at 06:06

Stack element above fixed element with JS/CSS

1 Answers1