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,

I see that you have some fix on your website. Do you need still help? If that file app.js is that your file? 

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