CODEWITHSUNDEEP
cssscrollposition
Joe
Joe

Reputation: 37

Position relative to scroll area

I want to absolutely position a div at the top and bottom of a scrolling area so they stay in place while I scroll inside the div.

They the scroll area has position: relative; set and the div's I want pinned to the top and bottom are absolutely positioned at top: 0; and bottom: 0;

Initially they are positioned as expected but when you scroll they scroll inside the scroll area.

Here is a code pen showing my problem: http://codepen.io/JoeHastings/pen/wKJzNb

Upvotes: 3

Views: 12493

Answers (3)

ecoe
ecoe

Reputation: 5322

Not certain if this is what's needed, but sticky position will maintain a div at the top of the scrolling area (live demo):

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Upvotes: 1

SalientGreen
SalientGreen

Reputation: 5353

I do not know of any way to fix an element inside another without using javascript. If you know the position of the box, you can used fixed positioning like this:

http://codepen.io/anon/pen/pjeRQQ

.transcript {
    position: relative;
    width: 400px;
    height: 150px;
    background: #ffcc00;
    overflow-y: scroll;

    &:before {
        content: '';
        position: fixed;
        width: 400px; height: 20px;
        margin-top: 0; margin-left: 0;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
    }

    &:after {
        content: '';
        position: fixed;
        top: 140px; left: 0;
        width: 400px; height: 20px;

        background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
    }
}

Upvotes: 3

Arber Braja
Arber Braja

Reputation: 445

Change .transcript position to static.

.transcript {
    position: static;
}

leave the rest intact and that should work ...

http://codepen.io/anon/pen/NGpdBY

Upvotes: 0

Related Questions