Translating jQuery code into native JavaScript

Question

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');
    }
  });

Try it once yourself before asking for a solution here. see [how to ask question](https://stackoverflow.com/help/how-to-ask) — kennysliding, Nov 11 '20 at 09:56

score 2 · Accepted Answer · answered Nov 11 '20 at 09:26

2

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');
    }
  });

answered Nov 11 '20 at 09:26

Gayatri Dipali

1,171
4
16

Don't forget to `upvote` helpful answers and `accept` when you can the ones that solved your problem. Glad to help! – Gayatri Dipali Nov 11 '20 at 09:28
if my solution worked for you please accept my answer – Gayatri Dipali Nov 11 '20 at 09:43

Dagmar · Answer 2 · 2022-02-04T10:34:12.427

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>

Translating jQuery code into native JavaScript

2 Answers2