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>
2 answers
solution1
1 2016-07-26 11:57:01
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/
solution2
1 2020-07-23 05:00:33
Use position: sticky; on your #middle div
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.