MyBB Community Forums

Uncaught TypeError: Cannot read property 'offsetTop' of null

Lines of offsetTop:

// -->
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}


I did this by following this guide to get a sticky header: https://www.w3schools.com/howto/howto_js...header.asp

When using https:// -- There is an icon showing in the URL box of chrome and it says:
https://gyazo.com/4c1a5509b4f47c150e056c4cbeb820ce

Just use

position: sticky;
top: 0;

.. it's much easier but it won't work in IE and some older browser versions, though.

position: -webkit-sticky

.. for Safari.

(2019-07-11, 05:15 PM)m0ckingbird Wrote: [ -> ]Just use

position: sticky;
top: 0;

.. it's much easier but it won't work in IE and some older browser versions, though.

position: -webkit-sticky

.. for Safari.

Thanks for that.

So to add -webkit-sticky, how do I call that if I'm already calling in the class for the class with position: sticky;?

Thanks!

The css you provided works great and all errors are now gone!