Add/remove class after 200px scroll?

Question

JavaScript

var oldScrollY = 0;
var div = document.querySelector('.site-header');

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  var dY = scrolled - oldScrollY;
  
  if ( dY > 0 ){
    div.className = 'site-header site-header-top';
  } else {
    div.className = 'site-header site-header-bottom';
  }
  
  oldScrollY = scrolled;
}

This code adds a class immediately when scrolling, thereby breaking the layout. How to make it start its work (add/delete throughout the entire page, but after 200 top pixels?

Answer 1

Hanging an event on onscroll is a bad habit and outdated practice. Today there is an Intersection Observer for this .

Answer 2

The problem is that /?abrakadabra123 there is such a page, and it is the DirectoryIndex page defined in .htaccess.

Answer 3

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !/cms/urlmodifier.php$
RewriteRule ^(.*)$ /cms/urlmodifier.php?param=$1 [L,QSA]

further in urlmodifier.php include the necessary page after parsing the request.