Question

我有一个小问题。我尝试创建一个导航，其中子（蓝框）div是75％的屏幕高度。我没有任何问题，只要父（绿框）处于相对位置。

但是，当我向下滚动时，我希望将父项固定在屏幕顶部。然而，孩子将身高改为父母的75％，但我需要保持75％的身高

示例代码，请转到上面的链接：

#scroll, #header, #one, #two {width: 100%}
#scroll {height: 2000px;}
#one {
    background: red;
    height:50px;
}
#two {
    background: green;
    height:50px;
}
#two.fixed{
    position:fixed;
    top:0;
}
#sub {
    position: absolute;
    height: 75%;
    width: 80%;
    background: blue;
    margin-top:50px;
}

<div id="scroll">
    <div id="header">
        <div id="one"></div>
        <div id="two">
            <div id="sub"></div>    
        </div>
    </div>
</div>

我一直试图修复它很长一段时间没有任何成功。我很感激你的帮助。

Answer 1

你可以用javascript：

给出div高度

$(window).bind('scroll', function(){
    var windowHeight = $(window).height();
    $('#two').toggleClass('fixed',$(window).scrollTop() > 50);
    $('#sub').css('height',windowHeight *.75);
});

或在将固定类应用于它后添加它：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop(),
    windowHeight = $(window).height();

    if (scroll >= 50) {
        $("#two").addClass("fixed");
        $('#sub').css('height', windowHeight *.75);
    } else {
        $("#two").removeClass("fixed");
    }
});

div百分比高度不能按预期工作 - 在固定div内

1 个答案: