Add margin-bottom to a fixed div

Question

There are a few pages to which I would like to add a sticky header dynamically by just placing a script. This code adds the header wherever the js is placed. But there should be a margin-bottom to the sticky header, so that there is a separation between the header and content.

http://jsfiddle.net/5gk5vwq7/

As you can see in the fiddle, the header covers up some of the content.

I cannot change anything in the 'content' css. So,is this possible by modifying anything in js or header css only..

adding margin-bottom to #MarkerTools css did not work

HTML:

<div id="form">
    <div id="content">Lorem ipsum</div>
</div>

CSS:

#MarkerTools {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    background: #2b539a;
}

JS:

 $('#form').append('<div id="MarkerTools"></div>');

Answer 1

CSS only solution

Demo

jquery

 $('#form').prepend('<div id="MarkerTools"></div>'); //prepend it instead of append so that we can use sibling selector

css (add this css)

#MarkerTools ~ #content {
    padding-top:50px /* or preferably margin-top:50px */
}

/* this apply only when `#MarkerTools` is present on the page

Answer 2

Just push down the content by 60px or as much as you want:

var form = $('#form');
form.css({'position':'relative','top':'60px'}).append('<div id="MarkerTools"></div>');

Check DEMO