Breaking News: Grepper is joining You.com. Read the official announcement!

javascript on scroll change nav color

Add Answer

Filthy Falcon answered on July 14, 2020 Popularity 10/10 Helpfulness 3/10

answer javascript on scroll change nav color

related change nav color on scroll vanilla js

related change the nav color on scroll

javascript on scroll change nav color

Comment

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript nav scroll

Link to this answer
Share Copy Link

Contributed on Jul 14 2020

Filthy Falcon

0 Answers Avg Quality 2/10

Closely Related Answers

change nav color on scroll vanilla js

Comment

var myNav = document.getElementById("nav");

window.onscroll = function() {
  "use strict";
  if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) {
    myNav.classList.add("scroll");
  } else {
    myNav.classList.remove("scroll");
  }
};

Popularity 6/10 Helpfulness 9/10 Language javascript

Source: stackoverflow.com

Tags: javascript nav scroll sc

Link to this answer
Share Copy Link

Contributed on May 23 2021

Lively Ladybird

0 Answers Avg Quality 2/10

change nav color on scroll vanilla js

Comment

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) {

Popularity 6/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: javascript nav scroll

Link to this answer
Share Copy Link

Contributed on May 23 2021

Lively Ladybird

0 Answers Avg Quality 2/10

change the nav color on scroll

Comment

const nav = document.getElementById('mynav');
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;

function updateNavColor(entries) {
  const [entry] = entries;
  if(!entry.isIntersecting) {
    nav.classList.add("nav-colored");
    nav.classList.remove("nav-transparent");
  } else {
    nav.classList.add("nav-transparent");
    nav.classList.remove("nav-colored");
  }
  
}

const headerObserver = new IntersectionObserver(updateNavColor, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`
});

headerObserver.observe(header)

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 19 2023

Peter Emad

0 Answers Avg Quality 2/10

change the nav color on scroll

Comment

const nav = document.getElementById('mynav');
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;

function updateNavColor(entries) {
  const [entry] = entries;
  if(!entry.isIntersecting) {
    nav.classList.add("nav-colored");
    nav.classList.remove("nav-transparent");
  } else {
    nav.classList.add("nav-transparent");
    nav.classList.remove("nav-colored");
  }
  
}

const headerObserver = new IntersectionObserver(updateNavColor, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`
});

headerObserver.observe(header)

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 19 2023

Peter Emad

0 Answers Avg Quality 2/10

javascript on scroll change nav color

Contents

More Related Answers

javascript on scroll change nav color

Closely Related Answers

change nav color on scroll vanilla js

change nav color on scroll vanilla js

change the nav color on scroll

change the nav color on scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.