Topic: MegaMenu throws error if smooth scroll is enabled
Hi Kurt,
The issue seems to be caused by the .scroll()ing functionality checking for navbar offset. Upcoming MDB update will to solve it, but if you can easily fix it yourself, right now. To do it, please refer to the mdb.js included in your project and find this fragment:
$(window).scroll(function () {
if ($('.navbar').offset().top > OFFSET_TOP) {
$('.scrolling-navbar').addClass('top-nav-collapse');
} else {
$('.scrolling-navbar').removeClass('top-nav-collapse');
}
});
...and wrap the if statement in another, checking whether an element with class navbar exists - like so:
$(window).scroll(function () {
if ( $( '.navbar' ).length ) {
if ($('.navbar').offset().top > OFFSET_TOP) {
$('.scrolling-navbar').addClass('top-nav-collapse');
} else {
$('.scrolling-navbar').removeClass('top-nav-collapse');
}
}
});
Please let us know if it resolved the problem.
With Best Regards,
Kuba
Jakub Strebeyko staff commented 7 years ago
Hi Kurt, Yes, the& was typo, sorry. Could you please be more specific about the error you're getting?
Regards,
Kuba
Jakub Strebeyko staff commented 7 years ago
Hi Kurt, The error is caused by the very same issue - scroll functionality tries to adjust to a potential offset value. Looking up an element with a particular attribute may throw back aundefined or false depending on a browser, yet again, an easy fix would be to wrap the insides of the smooth scroll inside of an if statement, which'd be checking whether the necessary variables are properly defined, like so:
$(".smooth-scroll").on('click', 'a', function(event) {
event.preventDefault();
var elAttr = $(this).attr('href');
if ( typeof elAttr !== typeof undefined && elAttr !== false) {
var offset = ($(this).attr('data-offset') ? $(this).attr('data-offset') : 0);
var setHash = $(this).closest('ul').attr('data-allow-hashes');
$('body,html').animate({
scrollTop: $(elAttr).offset().top - offset
}, 700);
if (typeof setHash !== typeof undefined && setHash !== false) {
history.replaceState(null, null, elAttr);
}
}
});
This is an instant fix suggestion, yet it does not 100% guarantee success, as the issue may have some contextual background. In case the above solution does not bring desired results, please provide the name and version of browser used, as well as an MDB version.
With Best Regards,
Kuba
Kurt commented 7 years ago
Hi Kuba, OS X 10.13.1, Safari 11.0.1 Best Regards Kurt
Jakub Strebeyko staff commented 7 years ago
Dear Kurt, Thanks for providing the additional details. As I mentioned, the "smooth scroll trouble" is caused by the scrolling script considering variables that are not necessarily present. The issue surfaced several times before, but always was possible to resolve through extraif conditions checking for smooth scroll required elements. If I understand correctly, it is not your case and adding these does not get rid of the problem. Are you still getting the same error that you mentioned (line 14732-related) despite adding ifs checking the type of elAttr?
Regards,
Kuba
Jakub Strebeyko staff commented 7 years ago
Dear Kurt, I got to make sure, considering the nature of errors presented - do you have any content to smooth-scroll to? Smooth-scroll feature works only on elements below the element with "smooth-scroll" class with IDs mentioned in href attribute. With Best Regards, Kuba
#intro & #zwei are where you want to smoothly scroll to, but you don't seem to be declaring it clear enough, i.e. by giving a navbar link href="#zwei" attribute. In the above example you're actually trying to anchor menu items to a non-existent element - #undefined, which seems to be bringing about the errors you're experiencing.
With Best of Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No