-1

I am trying to do a little investigation on which classes are causing an issue with my sticky nav bar where it flickers and re-appears on screen.

What I am planning to do is remove the class attributes to see which ones are having an affect. The issue I seem to be having is that the class elements seem to not be removed. I tried putting them outside the if statement, in the if statement and in the else statement but no luck, I can still see the element-is-sticky class when I inspect. What do I need to do in order to be able to remove it?

<header id="site-header" class="header-footer-group sticky-element-original element-is-sticky" role="banner" style="margin-top: 0px !important; margin-left: 0px !important; position: fixed; left: 0px; top: 0px; width: 651px; padding: 0px; z-index: 99999;">

...

</header>

<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */

let scrollTimeout

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
    
          document.getElementsByClassName("element-is-sticky").remove();
      document.getElementsByClassName("element-is-sticky").psrentNode.removeChild(document.getElementById("site-header"));
    
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("site-header").style.top = "0";
      document.getElementsByClassName("element-is-sticky").remove();
      document.getElementsByClassName("element-is-sticky").psrentNode.removeChild(document.getElementById("site-header"));
  } else {
      document.getElementById("site-header").style.top = "-100%";
      document.getElementsByClassName("element-is-sticky").remove();
      document.getElementsByClassName("element-is-sticky").psrentNode.removeChild(document.getElementById("site-header"));
  }

  // Event buffering here
  clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(function(){
    prevScrollpos = currentScrollPos;
  },100) // This delay may need adjustment...
}

</script>
BruceyBandit
  • 3,978
  • 19
  • 72
  • 144
  • do you want to add sticky – Vasim Shaikh Dec 21 '20 at 11:15
  • You should check the console. There you can see the errors... For instance, there is no `remove()` method where you use it. – trincot Dec 21 '20 at 11:22
  • **There are some logical inconsistencies:** `id` should be unique. There is no need for all that chaining if you end up using [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). Also if you remove elements using `remove`, you can not remove their parents on the next line due to `parentNode` being `null`. Lastly [`remove`](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove) is a function of a single `Node` and not a [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection). – Lain Dec 21 '20 at 11:27
  • It's based on a worpdress plugin. I did not code the header to be like that. I use a plugin that creates a sticky nav bar and it set header like so. There's some default wordpress stuff that's happening here and hence why it looks like that – BruceyBandit Dec 21 '20 at 11:32
  • Unless you have weird polyfills it simply is not valid Javascript on multiple occasions. If you open your console it should be full of **document.getElementsByClassName(...).remove is not a function and Cannot read property 'removeChild' of undefined**. – Lain Dec 21 '20 at 11:35

1 Answers1

0
document.getElementsByClassName("element-is-sticky").**psrent**Node.removeChild(document.getElementById("site-header"));

spelling mistake

correct:

document.getElementsByClassName("element-is-sticky").parentNode.removeChild(document.getElementById("site-header"));
Vasim Shaikh
  • 4,485
  • 2
  • 23
  • 52
user3362429
  • 13
  • 4
  • If the issue is a typo, it is better to "flag" the question as a typo. It's not the main issue here however, but it is one of a couple. – evolutionxbox Dec 21 '20 at 11:20