0

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

Hani Amer
  • 1
  • 1
  • https://codyhouse.co/tutorials/chameleonic-header-effect Take a look at this and see if it helps! – Zachary Haber Apr 07 '20 at 01:47
  • Does this answer your question? [Change style header/nav with Intersection Observer (IO)](https://stackoverflow.com/questions/57834100/change-style-header-nav-with-intersection-observer-io) – cloned Apr 07 '20 at 06:59

1 Answers1

1

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

kvidek
  • 11
  • 2
  • 1
    Welcome to StackOverflow, kvidek. We appreciate your answer, but ask that you include the pertinent information from sites that you link to. The reason is that we like answers to have longevity and in case the linked Github project is removed or renamed, your answer will not be as valuable. – dovetalk Apr 07 '20 at 13:57