Javascript 使用JQuery将一个元素的边距顶部设置为另一个元素的高度

我试图在顶部有一个标题，高度不固定，但位置固定，下面是一个内容区。现在，我只是在元素中添加了一个固定的填充顶部，这样内容就会显示在标题下面。我正在尝试使用JavaScript和JQuery来实现这一点。我认为我这样做是最好的方式，但它不太管用

[HTML]

<div class="contentPage" id="page_1" name="templates">
    <div class="contentPageHeader">
        <a href="#menu">
            <div class="pageBack">
                <h4>Back</h4>
            </div>
        </a>

        <h3>Templates</h3>
    </div>
    <div class="contentPageContent">
    </div>
</div>

---

对于完整的演示，请访问此

您需要定义marginTop的单位，例如，

px或%

：

$('.contentPageHeader').css('margin-top', headerHeight + 'px');
//^^ missed a selector (the dot)

---

您需要修复javascript：

    var headerHeight = $('.contentPageHeader').outerHeight();
    $('.contentPageContent').css('margin-top', headerHeight);

此外，此代码应放在

单击方法中

试试这个

$(document).ready(function () {
    $("a").click(function () {

        if (this.hash) {
            var hash = this.hash.substr(1);

            var $toElement = $("div[name=" + hash + "]");

            if (hash == "menu") {
                $('.contentPage').fadeOut(300);
                $($toElement).fadeIn(300);

            } else {
                $('#menu_holder').fadeOut(300);
                $($toElement).fadeIn(300);

            }
        }
       var headerHeight = $('.contentPageHeader').css( 'height' );  //your code added here
       $('.contentPageHeader').css('margin-top', headerHeight);  
    });


});

小提琴：

更新的fiddle:
所以当有人向下滚动时，您希望“模板”保持原样，而不会离开页面顶部？@JugglingBob是的，这就是contentPageHeader有固定位置的原因。此外，contentPageContent的
overflow-y
设置为
scroll
，因此div是可滚动的，而不是正文。在我的JSFIDLE中修复了它，但仍然不起作用（我添加了一个红色背景色，它仍然会显示在标题中）。但是感谢您的努力。我没有投票反对（不知道为什么会有人反对？）。我觉得很好，你让它工作，只是想知道为什么你使用
outerHeight（）
，与
css（'height'）
有什么区别？另外，为什么需要将其放入
click
方法中？我认为documentready函数也能正确执行它。
.contentPageHeader
有一个padding，方法返回一个包含padding和border的高度。默认情况下，
.contentPageHeader
是隐藏的，我们无法正确获取它的高度，因此我们需要先在页面上显示它（单击链接），然后计算它的高度。我明白了，这完全有道理。谢谢你说清楚。接受你的答案，因为你是第一个；）还有，有点离题了。我想把h3（“模板”）放在页眉的中心，但是后退按钮占用了一点空间，因为h3向右“居中”了一点。如何修复此问题？将
.pageBack
的样式替换为此
.pageBack{position:absolute；top:20px；left:25px；}
。不，这样您就可以将页眉的边距顶部设置为页眉的高度。我希望内容顶部的边距是页眉的高度。
$(document).ready(function () {
    $("a").click(function () {

        if (this.hash) {
            var hash = this.hash.substr(1);

            var $toElement = $("div[name=" + hash + "]");

            if (hash == "menu") {
                $('.contentPage').fadeOut(300);
                $($toElement).fadeIn(300);

            } else {
                $('#menu_holder').fadeOut(300);
                $($toElement).fadeIn(300);

            }
        }
       var headerHeight = $('.contentPageHeader').css( 'height' );  //your code added here
       $('.contentPageHeader').css('margin-top', headerHeight);  
    });


});