Topic: About improvment of Fixed button
Rostislav pro asked 7 years ago
Good day.
I'm using fixed button on several web pages like this
Can you give me advice about simplest way how to show my page with hiding Fixed button and appears this only after scrolled down to some #tag or by some px ?
Thanks
Add comment
Bartłomiej Malanowski staff answered 7 years ago
Hi, Rostislav!
Try the following code:
HTML (please notice, that I've added
.d-none
class to make it invisible by default:
<div class="fixed-action-btn smooth-scroll d-none" style="bottom: 45px;right: 24px;">
<a href="#section2" class="btn-floating btn-large red">
<i class="fa fa-arrow-up"></i>
</a>
</div>
JS:
$(window).on('scroll', function() {
var y = $(this).scrollTop();
var point = $('#yourelement').offset().top;
if(y > point) {
$('.fixed-action-btn').show();
} else {
$('.fixed-action-btn').hide();
}
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags