Topic: Change Logo on Navbar During Scroll
I am trying to change the logo during a scroll which I was able to do on a normal BS build. However, with MDB, something is overriding it and I cannot figure out why. The function works as I am able to get it to work on other sites with the same effect when scrolling down. I can use some help with this as this is a common request I receive and I really want to start using MDB. No errors in the console. You can see the effect on primetrust.com
'use_strict';
// DOM Variables
var initialImg = "img/logos/PDH-white-medium.png";
var scrollImg = "img/logos/PDH.png";
var nav = document.getElementById('navbar');
// Scrolling Function
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
});
// Change Logo and Logo Height on Scroll
$(window).scroll(function() {
var value = $(this).scrollTop();
if (value > 100)
$(".logo").attr("src", scrollImg);
else
$(".logo").attr("src", initialImg);
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Macbook Pro
- Browser: Chrome
- OS: Mac Mojave
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 6 years ago
Hi,
may you use our snippets to show your problem?
https://mdbootstrap.com/snippets/
Best,
Piotr