Fixed position element inside div container only

Question

I have a fixed block element inside a container. On scrolling the fixed positioned element is going beyond the container. I understood fixed element will be positioned according to window vw. But is there any way to make sure fixed positioned element will get scrolled only upto container position. The fixed position element should not go beyond the container

The problem can be seen in the following.

https://codepen.io/anon/pen/dKLByX

I tried to fix the problem using the following:

if($(window).scrollTop()>1900){
    $('.fixed-ct').css({'bottom':'200px','top':'auto'});
}else if($(document).scrollTop() <=100) {
    $('.fixed-ct').css({'top':'10px','bottom':'auto'});
}else {
    $('.fixed-ct').css({'top':'0px','bottom':'auto'});
}

but sometimes the fixed container is at end because of bottom 200px it should be at top using top:0px on scroll and it should be inside the container itself.

Possible duplicate of [Fixed position but relative to container](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) — Limbo, Jul 04 '18 at 13:07
I tried using position: sticky. It is not working in safari and some old browsers — user521024, Jul 04 '18 at 13:45

score 10 · Answer 1 · answered Jul 04 '18 at 13:27

10

There you go, use position sticky inside .fixed-ct and add position:relative to .main-ct

.main-ct {
  width: 1000px;
  height:600px;
  border: 1px solid #000;
  position:relative;
}
.fixed-ct {
  position: sticky;
  width:100px;
  height:20px;
  background: red;
  top:10px;
}
.like-body {
  width: 100%;
  height:1300px;
}

<div class="like-body">
  <div class="main-ct">
    <div class="fixed-ct"></div>
  </div>
</div>

answered Jul 04 '18 at 13:27

Teobis

825
5
12

Can you explain what position:sticky does and why it works this way or point to a link to read more to make your answer better? – Marvin Sep 07 '18 at 20:55
How do you get the red rectangle to be positioned more downwards before the user starts scrolling (not in the top left corner) – Marvin Sep 07 '18 at 21:23
@Marvin sticky is like a fixed element (position fixed) but within his parent container, you can set top property, like an absolute positioned element, and will remain inside the parent element when scrolling imitating a fixed position within his parent. See the example [codepen](https://codepen.io/Teobis/pen/QVOrqp) – Teobis Sep 07 '18 at 21:56

score 0 · Answer 2 · answered Apr 21 '20 at 19:23

CSS position fixed property can't operate by their parent element, it is related to browser's viewport. So you may try this out.

*body {
  margin: 0;
  padding: 0;
  outline: 0;
}

.container {
  width: 700px;
  margin: 0px 100px 0px 100px;
  padding-bottom: 2000px;
}

.main {
  width: 450px;
  height: 450px;
  background: rgba(228, 174, 201, .5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: scroll;
  position: absolute;
}

.header-fixed {
  background: rgba(255, 0, 0, 0.404);
  height: 50px;
  width: 450px;
  top: 0;
  position: sticky;
}

.body p {
  padding: 0px 20px 1000px 20px;
  text-align: justify;
  font-size: 20px;
  line-height: 40px;
}

.contact {
  background: rgba(12, 146, 236, 0.3);
  bottom: 20px;
  left: 300px;
  position: sticky;
  display: inline;
  padding: 10px;
  border-radius: 5px;
}

<div class="container">
  <div class="main">
    <div class="header-fixed"></div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptas est repellendus entore sit quaerat ratione architecto quos molesti a quis nisi! Veniam cum hic cumque?</p>
      <h2 class="contact">Call Now!</h2>
    </div>
  </div>
</div>

Fixed position element inside div container only

2 Answers2

Linked

Related