Classie js, How to use it

Example of codes


function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = jQuery('#header').height(),
            header = document.querySelector("body");
        if (distanceY > shrinkOn) {
            classie.add(header,"sticky-header");
        } else {
            if (classie.has(header,"sticky-header")) {
                classie.remove(header,"sticky-header");
            }
        }
    });
}
window.onload = init();



body.sticky-header div#main-nav {
    position: fixed;
    top: 0;
}


Source : https://brentstromberg.com/sticky-header-classie-js/


window.pageYOffset : https://www.w3schools.com/jsref/prop_win_pagexoffset.asp
var x = window.scrollX;
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_pagexoffset


<br />
<div id="foo\bar">
</div>
<div id="foo:bar">
</div>
<script>
  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
  document.querySelector('#foo\bar');    // Does not match anything

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\bar'); // Match the first div

  document.querySelector('#foo:bar');    // Does not match anything
  document.querySelector('#foo\\:bar');  // Match the second div
</script>



https://www.w3schools.com/jsref/met_document_queryselector.asp

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselector_class