Fixed positioned <div>

Question

I have 3 div elements in this format:

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

After some paragraphs in the primary <div>, there's a fixed <div> element. After the fixed <div>, there'll be scrollable paragraph. What I'd like to do is to fix the "primary" & "fixed" <div> elements to be fixed while the "scrolling" <div> will be scrollable inside the primary <div>.

When I scroll, only the content in the "scrolling" div element(the last div) should move while the rest(the first two) stays the same. How do I achieve this?

I've been playing around with the position: fixed; and position: relative; but I couldn't find what I wanted. Here's jsfiddle outline.

Answer 1

Using css and jQuery:

You need to wrap the first paragraph and fixed class with div.

E.g. <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>

Then, you need to add css properties to fixed-div, fixed, and scrolling classes.

.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;
}

Last, jquery codes: You need to use jquery to detect the height of the fixed-div class then assign the top property of scrolling class by the height of fixed-div class.

$(document).ready(function() {

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

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

});

Here's the JsFiddle Link.

Hope it helps.

Answer 2

Why try that way by giving specific height to your Scrolling div and make some changes in your CSS. check out this Fiddle please.

I've just made changes in your scrolling div as follow.

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

Update:

Or you can remove scroll bar from bottom by little changes in your parent and scrolling class in CSS. Check new 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%;
}

Please Note the Overflow: hidden on Parent div and and Overflow: auto on scrolling one.