Button in fixed position in only one div

Question

I have created two div's, one at the top and one at the bottom. I have created one button. I gave a property as fixed position at left side bottom page. If i scroll the page the button is fixed at that position only. basically the button is in fix position for the whole page. My Requirement: When I scroll the page the button should be fixed for some certain height only. When I am scrolling the page the button should be fixed at left button only till the first div bottom line touches the button bottom line. and wen I scroll the page that button should move along with the bottom line of first div.

Basically the button should be in fixed position till the first div bottom line only. when the first div bottom line collapse with the button bottom line, the button should be relative/absolute and moves along with it.

Hope you understood my requirement. Below is my code for which I am looking for requirement

 

   #top {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  position: absolute;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  bottom: 0px;
  font-size: 16px;
  margin-left: 0px;
  cursor: pointer;
  padding: 10px 24px;
  position: fixed;
}

#bottom {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  top: 910px;
  position: relative;
}

#middle {
  bottom: 50px;
  position: fixed;
}

<html>

  <body>
    <div id="top">
      <div id="middle">
        <button class="button">Fixed Element</button>
      </div>
    </div>

    <br>
    <br>
    <div id="bottom">


    </div>
  </body>

</html>

Position fixed is relative to the viewport, there are some useful tips on this quesiton: http://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent which you might find useful. — connorb, Jul 26 '16 at 10:07

Md. Khairul Hasan · Answer 1 · 2016-07-26T12:03:59.717

I think this is not possible with only css. You need javascript or jquery. You need jquery to run my example. You should measure the scrolled amount with the top or other element and change the bottom/top of the button accordingly like this:

Jquery

$(window).scroll(function () {
  if (($(this).scrollTop()+$(window).height())>$('#top').height()){
    $("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" });
  }else{
    $("#btn_fixed").css({ bottom: '0px' });
  }
});

I have changed css and html of your code.

CSS

#top {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  position: absolute;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  bottom: 0px;
  font-size: 16px;
  margin-left: 0px;
  cursor: pointer;
  padding: 10px 24px;
  position: fixed;
}

#bottom {
  border: 1px solid black;
  height: 900px;
  width: 80%;
  top: 910px;
  position: relative;
}

HTML

<div id="top">
  <div id="middle">
     <button class="button" id="btn_fixed">Fixed Element</button>
  </div>
</div>

<br>
<br>
<div id="bottom">


</div>

Working fiddle : https://jsfiddle.net/khairulhasanmd/h9y0bf1g/

Thanks can you solve this using "Javascript"? instead of Jquery I would help me alot. — Aryan, Jul 26 '16 at 16:31
Implementation in `javascript` would require more lines of code, event listener e.t.c. you can convert it yourself by searching google. If this helps, you can mark this answer as accepted. Thanks. — Md. Khairul Hasan, Jul 27 '16 at 03:13

score 1 · Answer 2 · answered Jul 23 '20 at 05:00

1

Use position: sticky; on your #middle div

answered Jul 23 '20 at 05:00

Islam Murtazaev

1,488
2
17
27

Button in fixed position in only one div

2 Answers2