Question

我试图在顶部设置一个标题，其高度不固定但位置固定，低于内容区域。现在，我只是在元素中添加了一个固定的填充顶部，因此内容将显示在标题下方。我试图使用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>

[JS]

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

要完整演示，请访问此JSfiddle

Answer 1

你应该修复你的javascript：

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

此代码也应放在click方法中。

jsfiddle

Answer 2

您需要为marginTop定义单位，例如。 px or %：

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

Answer 3

试试这个

$(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);  
    });


});

小提琴：https://jsfiddle.net/mdeujc0u/3/

更新了小提琴：https://jsfiddle.net/mdeujc0u/5/

使用JQuery将一个元素的margin-top设置为另一个元素的高度

3 个答案: