How to change image on scoll when using navbar?

Topic: How to change image on scoll when using navbar?

Reuben Kraft free asked 5 years ago

I have two logo images - one that will show with transparent background and one that should show on a scroll.

Add comment

MDBootstrap staff answered 5 years ago

Hi, I have simple JQ example for you:

$(window).scroll(function () {
if ($(document).scrollTop() < ScrollValue of swapping images) {
    $('selectorToYourImage').attr('src', 'img/imgNumber1.png');
} else  {
    $('selectorToYourImage').attr('src', 'img/imgNumber2.png');
}     })

If you need more help I am here for you.

Best Regards, Piotr

Reuben Kraft free commented 5 years ago

Thank you! Can you let me know where to put this? Should it go into my Nav.js (within components dir)?

MDBootstrap staff commented 5 years ago

You can add this code to the custom script tags before closing body.

<script> HERE</script>

Don't forget to change the: "ScrollValue of swapping images"; "selectorToYourImage" and "img/imgNumber1.png" "img/imgNumber2.png" to desired values.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.8.0
Device: Desktop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Reuben Kraft

5Support score
1Questions 0Answers 0Snippets