Sticky Navigation on Scroll > add class for page-content

Question

I'm using a script and would like to adjust it - but it does not work. So maybe someone can help me. Script:

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky");
  } else {
    navigation.classList.remove("sticky");
  }
}

This script add the class sticky to navigation. I would like to add the class "padding-page" to the class "page-content" in this function (also remove it) - as the sticky navigation is not relative anymore and the "page-content" jumps 48px more to top.

score 1 · Answer 1 · edited Dec 21 '20 at 17:18

1

Please try this.

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky padding-page");
  } else {
    navigation.classList.remove("sticky padding-page");
  }
}

edited Dec 21 '20 at 17:18

dhruw lalan

791
1
11
23

answered Dec 21 '20 at 13:54

Kaleem Nalband

687
7
21

But this version add the padding-page class to the navigation - but it should add it to the content-page class. – Kish Dec 21 '20 at 13:59

score 1 · Answer 2 · answered Dec 21 '20 at 14:01

Found the solution:

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var welcome = document.getElementById("welcome");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky"); welcome.classList.add("padding-page");
  } else {
    navigation.classList.remove("sticky"); welcome.classList.remove("padding-page");
  }
}

Just created a id for the first content and add padding-page to this :) Works perfect

Sticky Navigation on Scroll > add class for page-content

2 Answers2