将margin-bottom添加到固定div

Question

我想通过放置脚本动态添加一个粘性标题。 此代码在js所在的位置添加标头。但是粘性标题应该有一个底边，因此标题和内容之间存在分离。

http://jsfiddle.net/5gk5vwq7/

正如你在小提琴中看到的那样，标题涵盖了一些内容。

我无法更改“内容”中的任何内容。 CSS。那么，这是否可以通过修改js或header css中的任何内容来实现..

向#MarkerTools添加margin-bottom css无法正常工作

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

只需将内容按下60px或尽可能多地下载：

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

检查DEMO

Answer 2

仅CSS解决方案

Demo

jquery的

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

css（添加此css）

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

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