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.

The primary div's height is the height of the browser's window. So, it's 100%. The height of the fixed div is 100px. For the last scrolling div is what's left from the primary div. — J.Jay
– J.Jay, Commented Jun 30, 2015 at 4:44
Ok. Then I suggest you use jquery to do it. If you want I will post my answer using jQuery. — Alberto I.N.J.
– Alberto I.N.J., Commented Jun 30, 2015 at 5:16

Kartic · Accepted Answer · 2015-06-30 05:05:21Z

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.

Alberto I.N.J. · Accepted Answer · 2015-06-30 06:27:59Z

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.

Collectives™ on Stack Overflow

Fixed positioned <div>

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related