Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Change Logo on Navbar During Scroll

TeddyS31 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

Opened

Specification of the issue

  • ForumUser: 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
Tags