CODEWITHSUNDEEP
javascript
Hani Amer
Hani Amer

Reputation: 1

Change logo color on scroll (JavaScript)

I applied this code 

function logoSwitch () {
  $('.altLogo').each(function() {
    $(this).css('top',
      $('.startLogo').offset().top -  $(this).closest('.row').offset().top
    );
  });
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();

Over this website

https://archillect-2.webflow.io/#7

But I need it exactly like https://www.bornfight.com

When you scroll to another div Immediately change the logo and menu not wait to the exact position to change.

should I apply the class (startlogo) somewhere else?

Thanks

Upvotes: 0

Views: 810

Answers (1)

kvidek
kvidek

Reputation: 11

In the Bornfight website case midnight.js library was used. https://aerolab.github.io/midnight.js/ It is pretty straightforward — check the docs. In short, it creates a clone of your element and switches between those instances as you scroll past them. The downside of this is that it uses jQuery. Also there is a vannilla JS version of this plugin we developed some time ago in Bornfight so feel free to check that also: https://github.com/bornfight/flipswitch

Upvotes: 1

Related Questions