Html button position to be fixed upto certain div limits
Question
I have a button inside div. I want it to be fixed at the bottom of the screen till I scroll down the page upto the div end. further scrolling will lead the button to be at the bottom of the div.
Note: the size of the div may changes upon expanding the contents inside it.
my code is:
<html>
<section>
<div>
<div> some content</div>
<div class="apply-filter" id="showsubmit" align="right">
<input class="com-btn" onclick="javascript:journalApplyFilters()" value="Apply Filters" />
</div>
</div>
</section>
</html>
<style>
.com-btn, nav#facets form.filter-list-form .submit
{
padding: 5px 10px;
color: #2f2f2f;
font-weight: bold;
text-shadow: 0 1px 0 #D6DEE6;
cursor: pointer;
border: 1px solid #94a4b2;
border-radius: 3px;
background: #aebfce;
position: fixed;
bottom: 4px;
</style>
<script type="text/javascript">
function checkOffset() {
if($('.com-btn').offset().top + $('.com-btn').height() >= $('footer').offset().top - 10)
$('.com-btn').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('footer').offset().top)
$('.com-btn').css('position', 'fixed'); // restore when //you scroll up
}
$(document).scroll(function() {
checkOffset();
});
</script>
problem is as i mentioned my div is of variable size so some times when the footer is not visible then the "apply filter" button remains at the bottom of page(fixed attribute).No 2- when my footer is visible if i click + button to expand the content then the button is invisible until i scroll again
1 answers
solution1
0 2015-11-06 11:24:57
You should use JS in order to have such behavior as a CSS only solutions could be not feasible.
Here below a simplistic example, just to help you out as start.
Basically you can:
- Add or remove a class with your
position:fixed;when a user scroll the window ofxpixels
window.scrollY can be use to find out how much the user has scroll down the window.
position:fixed; in your CSS allow you to place your button relative to the viewport, which means it always stays in the same place even if the page is scrolled.
Live example here, notice the button position after you scroll down of 100 pixel.
https://jsfiddle.net/sbzj91s9/6/
window.addEventListener('scroll', function(event){
console.log(window.scrollY);
if(window.scrollY >= 100){
var elm = document.getElementById('btn').classList.remove('fix');
}
})
<div id="area">
<button id="btn" class="fix" type="button">Click Me!</button>
</div>
<div id="content">
<p>some text here</p>
</div>
body{
margin :0;
padding:0;
}
#area {
position:absolute;
top:0;
left:0;
width:250px;
height:250px;
background-color:red;
}
#content {
position:absolute;
top:1500px;
background-color:gray;
}
#btn{
position:absolute;
bottom:0;
}
.fix {
position: fixed !important;
bottom:0;
}
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.