Change Logo on Navbar During Scroll


Topic: Change Logo on Navbar During Scroll

Stanowski pro asked 6 years ago

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

Piotr Glejzer staff commented 6 years ago

Hi,

may you use our snippets to show your problem? 

https://mdbootstrap.com/snippets/ 

Best,

Piotr


Please insert min. 20 characters.

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