Question

这种格式有3个div元素：

<div class='primary'>
    Some paragraphs.
    <div class="fixed"> Fixed div element.</div>
    <div class="scrolling"> Scrollable paragraph </div>
</div primary>

在主要<div>中的某些段落之后，有一个固定的<div>元素。在修复<div>之后，会有可滚动的段落。我想做的是修复“主要”＆amp; “固定”<div>元素需要修复，而“滚动”<div>可在主要<div>内滚动。

当我滚动时，只有“滚动”div元素（最后一个div）中的内容应该移动而其余内容（前两个）保持不变。我如何实现这一目标？

我一直在玩position: fixed;和position: relative;，但我找不到我想要的东西。这是jsfiddle大纲。

Answer 1

为什么要通过为Scrolling div提供特定高度并在CSS中进行一些更改来尝试这种方式。请查看此Fiddle。

我刚刚对scrolling div进行了更改，如下所示。

.scrolling{
    border: 3px solid black;
    position: relative;
    height: 60px;
    overflow: scroll;
    width:100%;
}

<强>更新

或者您可以通过CSS中父级和滚动类的少量更改从底部删除滚动条。检查新的Fiddle here

.primary{
    border: 1px solid red;
    position: relative;
    overflow: hidden !important;
}
.scrolling{
    border: 3px solid black;
    position: relative;
    height: 60px;
    overflow: auto;
    width:100%;
}

请注意父div上的Overflow: hidden和滚动上的Overflow: auto。

Answer 2

使用 css 和 jQuery ：

您需要使用fixed包装第一段和div课程。

例如 <div class="fixed-div">

<div class="primary">
    <div class="fixed-div">
        Some paragraphs.
        <br />
        Some paragraphs.
        <br />
        Some paragraphs. 
        Some paragraphs.
        Some paragraphs.
        Some paragraphs.
        <div class="fixed">
            Fixed div element.
        </div>
    </div>
    <div class="scrolling">
        xxx Scrollable paragraphs.Scrollable paragraphs.Scrollable paragraphs.Scrollable
    </div>
</div>

然后，您需要将css属性添加到fixed-div，fixed和scrolling类。

.fixed-div {
    position: fixed;
    background: #fff;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
}

.fixed {
    border: 2px solid blue;
    height: 100px;
}

.scrolling {
    border: 3px solid black;
    position: absolute;
}

最后， jquery代码：您需要使用 jquery 来检测fixed-div类的高度，然后指定scrolling的顶级属性按fixed-div类的高度分类。

$(document).ready(function() {

    var fixedDivHeight = $('.fixed-div').height();
    $('.scrolling').css('top', fixedDivHeight);

    $(window).resize(function() {
        fixedDivHeight = $('.fixed-div').height();
        $('.scrolling').css('top', fixedDivHeight);
    });

});

这是JsFiddle Link。

希望它有所帮助。

固定定位<div>

2 个答案: