I have a button (#phone-bar) with position: fixed and i need it with bottom: 0 when the footer is not completely visible. The button is inside the footer itself but i can move it.
What i have now:
jQuery(window).on("scroll load", function (e) {
let footerH = jQuery('#footer').prop('scrollHeight');
let windowTop = jQuery(window).scrollTop() + window.innerHeight;
let footerTop = jQuery('#footer').offset().top;
//footer visibile
if (windowTop >= footerTop) {
jQuery("#phone-bar").removeClass("pbNoFooter");
//footer non visibile
} else {
jQuery("#phone-bar").addClass("pbNoFooter");
}
});
<footer id="footer" role="contentinfo">
<div id="footer-content">
<div class="container">
xxxxxx xxxxxx xxxxxx xxxxxx
<br>
xxxxxx xxxxxx
</div>
</div>
<div id="phone-bar" class="open">
<a class="phone-bar-label" href="#">
<span class="glyphicon glyphicon-earphone phone-icon"></span>
%s
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</footer>
#phone-bar {
background: transparent;
padding: 0 15px;
position: fixed;
width: 100%;
top: auto;
bottom: 96px;
z-index: 1;
overflow-y: auto;
}
#phone-bar.pbNoFooter {
bottom: 0;
}
@media screen and (min-width: 862px) {
#phone-bar {
bottom: 77px;
}
}
With my code it’s partially working, because at some point i have a visible gap while footer is not completely visible.
EDIT1:
I don’t need css only solution, i want to know how to calculate dynamically the bottom value to use.
EDIT2:
The html structure and css:
<body>
<header/>
<nav/>
<div class="container main-content-block"/>
<foooter>
<div id="phone-bar"/> <!--can be moved outside footer-->
</footer>
</body>
body {
position: relative;
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
.main-content-block {
flex: 1;
width: 100%;
}
2
Answers
As you can move the element in your html, you can use sticky positioning to make it fixed at the bottom until it hits the footer.
Here is a simple example :
The point is to put your sticky element as a child of the main content instead of the footer and use :
position: sticky; bottom: 0;
To dynamically calculate the bottom value for your button (#phone-bar) based on the visibility of the footer, you can modify your JavaScript code as follows:
In this code, the footerH variable is used to store the height of the footer, including any padding and border. The distance variable calculates the vertical distance between the bottom of the window and the top of the footer. If the distance is greater than or equal to the height of the footer (footerH), it means that the footer is not completely visible.
With this approach, the bottom value of #phone-bar is set dynamically based on the visibility of the footer. The pbNoFooter class is added or removed accordingly, allowing you to apply different styles to the button as needed.
Make sure to adjust your CSS styles for #phone-bar.pbNoFooter to achieve the desired positioning.