CODEWITHSUNDEEP
reactjs
J.W
J.W

Reputation: 13

Translating jQuery code into native JavaScript

I made it using jQuery.

I want to use these script contents in React, what should I do?

$(window).scroll(function(){  
    if($(document).scrollTop() > 10){
      $('header').addClass('scroll');
    } else {
      $('header').removeClass('scroll');
    }
  });

Upvotes: 0

Views: 43

Answers (2)

Dagmar
Dagmar

Reputation: 3261

The accepted answer did not work for me. It looks like code that a generic jquery to javascript converter spat out.

This is what worked for me:

  <script type="text/javascript">
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 10) {
            document.querySelector('.header').classList.add('scroll');
        } else {
            document.querySelector('.header').classList.remove('scroll');
        }
    });
  </script>

Note that I replaced scrollTop with pageYOffset. The former does not work my Chrome browser on MacOS. See: window.pageYOffset vs document.documentElement.scrollTop

Don't forget to use a passive listener if supported.

<script type="text/javascript">
// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// Use our detect's results. passive applied if supported, capture will be false either way.
window.addEventListener('scroll', function() {
    if (window.pageYOffset > 10) {       
        document.querySelector('.header').classList.add('scroll');
    } else {
        document.querySelector('.header').classList.remove('scroll');
    }
}, supportsPassive ? { passive: true } : false);
</script>

Upvotes: 0

Gayatri Dipali
Gayatri Dipali

Reputation: 1283

You can follow this javascript code not particularly babeljs but still this can work:

document.querySelector(window).scroll(function(){  
    if(document.querySelector(document).scrollTop > 10){
      document.querySelector('header').classList.add('scroll');
    } else {
      document.querySelector('header').removeClass('scroll');
    }
  });

Upvotes: 2

Related Questions