Topic: About improvment of Fixed button
Rostislav
pro
asked 9 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 9 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