Smooth scroll automation with .navbar.fixed-top

web
mobile

Topic: Smooth scroll automation with .navbar.fixed-top

Boris Akimenko pro asked 3 years ago

Hi guys! Now about smooth scroll. For example you can use your demo page https://mdbootstrap.com/javascript/smooth-scroll/ After clicking on smooth scroll link, an element with target id (header H) hides behind the .navbar.fixed-top Why it's important? Because use only data-offset is not about automation, but we are about it :) So, if you'll add checking for the .navbar.fixed-top height and stops smooth scroll right under it - this will be awesome :) Somthing like this:


//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
    event.preventDefault();
    var elAttr		= $(this).attr('href');
    var offset		= ($(this).attr('data-offset') ? $(this).attr('data-offset') : 0);
    var fixedTop	= $('.navbar.fixed-top');
    if (fixedTop && fixedTop.length){
	offset = fixedTop.outerHeight();
    }
    $('body,html').animate({
        scrollTop: $(elAttr).offset().top - offset
    }, 700);
});

It works here: xalon.ru And, guys, how do you looks at to declare variables for multiple jQuery calls in a functions? This simple code can looks like:


//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
    event.preventDefault();
    var $this           = $(this);
    var elAttr		= $this.attr('href');
    var offset		= ($this.attr('data-offset') ? $this.attr('data-offset') : 0);
    var fixedTop	= $('.navbar.fixed-top');
    if (fixedTop && fixedTop.length){
	offset = fixedTop.outerHeight();
    }
    $('body,html').animate({
        scrollTop: $(elAttr).offset().top - offset
    }, 700);
});

But if there are not so simple function this method can be useful instead every time jQuery wrapping.


We will consider it

svm pro commented 2 years ago

still doesn't implemented.

Marta Szymanska staff pro premium commented 2 years ago

We still have this solution in our ideas, maybe we will add this to our mdb.js in the future.

Please insert min. 20 characters.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Depreciated
  • Browser: Depreciated
  • OS: Depreciated
  • Provided sample code: No
  • Provided link: Yes