Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript breaking https
#1
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
Reply
#2
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.
Reply
#3
(07-11-2019, 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!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)