Topic: About improvment of Fixed button

Rostislav pro asked 5 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

Rostislav pro answered 5 years ago


Thank for advice

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();
    }
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags