CODEWITHSUNDEEP
javascript
Aryan
Aryan

Reputation: 31

Button in fixed position in only one div

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>

Upvotes: 3

Views: 7613

Answers (2)

Islam Murtazaev
Islam Murtazaev

Reputation: 1788

Use position: sticky; on your #middle div

Upvotes: 1

Md. Khairul Hasan
Md. Khairul Hasan

Reputation: 714

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/

Upvotes: 2

Related Questions