Changing Nav-Bar Color After Scrolling

Change navbar color while scrolling

If you are using pure javascript:

Firefox and IE has the overflow at html while Chrome, Safari and Opera places it at the body level:

See here for more info:

var body = document.body; // For Chrome, Safari and Opera

var html = document.documentElement; // Firefox and IE places the overflow at the
level, unless else is specified. Therefore, we use the
documentElement property for these two browsers

So you must use this:

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

and it will work cross-browser. Cheers!

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");  }};

body {  margin: 0;  padding: 0;  height: 4000px;}.nav {  position: fixed;  width: 100%;  height: 60px;  background-color: #111;  transition: all .5s ease-in-out;}.scroll {  background-color: transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class="nav"></div>

Changing navbar color on scroll after 100vh

To get the scroll position use window.scrollY and to get the veiwport height use window.innerheight so do:

const myNav = document.getElementById('header')

window.onscroll = function() {
  if(window.scrollY > window.innerHeight){
    myNav.classList.add('scrolled')
  }else{
    myNav.classList.remove('scrolled')
  }
}

body{
  min-height: 400vh;
}

nav{
  position:fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: green;
}

nav.scrolled{
  background: black;
}

<nav id="header"></nav>

change navbar content color on scroll

You have a more specific CSS selector .menu-list li a that is setting the color. To overwrite this you need a selector that is as specific and later in the document, or more specific.

Since you are adding the sticky class, you could use: .sticky .menu-list li a

const navbar = document.querySelector(".navbar");

window.onscroll = ()=> {
  this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}

.navbarcontent {
  max-width: 1250;
  height: 70px;
  margin: auto;
  padding: 0px 30px;
}

.navbar {
  position: fixed;
  z-index: 5;
  width: 100%;
  padding: 25px 0;
  transition: all 0.3s ease;
  /* background: #1b1b1b; */
}

.navbar.sticky {
  padding: 10px 0;
  background: black;
  box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
  content: "";
  /* background-color: rgba(10, 10, 10, 0.9); */
  color: #fff;
}

.navbar.sticky::after {
  content: "";
  opacity: 0.5;
}

.navbar .navbarcontent {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .menu-list {
  display: inline-flex;
}

.navbar .logo a {
  color: #fff;
}

.menu-list li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transform: all 0.3s ease;
}

.menu-list li a {
  color: black;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
}

.sticky .menu-list li a {
  color: #FFF;
}

<nav class="navbar">
        <div class="navbarcontent">
            <div class="logo"><a href="#">Logo</a></div>
            <!-- <div class="icon cancel-btn">
                <img src="/img/times-solid.svg" alt="Sample Image">
            </div> -->
            <ul class="menu-list">
                <li><a href="#hero">Home</a></li>
                <li><a href="#text-slider">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contactform">Contact</a></li>
                <li><a href="#">Deutsch</a></li>
            </ul>
            <!-- <div class="icon menu-btn">
                <img src="/img/bars-solid.svg" alt="Sample Image">
            </div> -->
        </div>
    </nav>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Make Nav-Bar text change color when scrolling with CSS

I figured it out, the scrolling effect were a part of Elementors plugin for wordpress.

the nav bar items are links therefore i could just target them with this

selector.elementor-sticky
--effects a,selector
.elementor-sticky--effects i{
    color: #001C38 !important;

and have the same effect by to it as the other scrolling effect because of --effects

CSS Change Navbar Background color when scrolling

Using HTML

Your HTML should be:

<div class="navbar-fixed navbar-add navbar-trans">
.....
</div>

Since it already contains the navbar-trans class, it will remain transparent. Once the user scrolls, the javascript will kick in, and remove/add navbar-trans class as per the code.

Using JS

var landingPage = 'YOUR_LANDING_PAGE_URL';

function updateNavStyle() {
  if(landingPage.length > 0 && location.href.toLowerCase().indexOf(landingPage.toLowerCase()) >= 0) {
    var offset = $('#change_color').offset();
    var scroll_start = $(document).scrollTop();
    if (scroll_start > offset.top) {
      // the white normal navbar
      $(".navbar-add").removeClass("navbar-trans");
    } else {
      // what the users sees when he lands on the page
      $(".navbar-add").addClass("navbar-trans");
    }
  }
}

$(document).ready(function() {
  var scroll_start = 0;
  var change_color = $('#change_color');

  if (change_color.length) {
    $(document).scroll(updateNavStyle);
    updateNavStyle(); // Note this.
  }
});

Here, in addition to binding the updateNavStyle function on scroll, I have added a call to it once the DOM is ready. As a result, as soon as the page loads, the function will be executed once and it will apply the styles based on scroll position.

Update:

If your landing page is 'index.html', where you want this function to work, write its value in variable landingPage. So the function will not run in other pages such as 'about.html' or 'contacts.html'.

Change navbar background color on page scroll

This is what your current function and css does on a page that has a <div> with id=startchange. On page load the navbar is not transparent. As soon as you scroll the navbar becomes transparent (border still visible) and once the <div> with id=startchange passes the top of the page you navbar becomes non transparent again.

If you make your css more specific you can get the navbar to be transparent to start with no border (at larger screen sizes, you might want to look at how its styled for smaller screens too).

$(document).ready(function(){           var scroll_start = 0;    var startchange = $('#startchange');    var offset = startchange.offset();    if (startchange.length){        $(document).scroll(function() {             scroll_start = $(document).scrollTop();            if(scroll_start > offset.top) {                $(".navbar").css('background-color', '#f0f0f0');            } else {                $('.navbar').css('background-color', 'transparent');            }        });    } });

.navbar.navbar-default.navbar-fixed-top {    background-color: transparent;    border-color: transparent;    -webkit-transition: background-color 2s; /* Safari */    transition: background-color 2s; }
.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{    background-color: transparent !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">    <nav class="navbar navbar-default navbar-fixed-top">        <div class="container-fluid">            <div class="navbar-header ">                                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav">                    <span class="sr-only">Toggle navigation</span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                </button>            </div>
            <div id="navbarNav" class="navbar-collapse collapse ">                <br/><br/>                <ul class="nav navbar-nav navbar-right ">                    <li><a href="#">ABOUT</a></li>                    <li><a href="#">SERVICES</a></li>                    <li><a href="#">CONTACT</a></li>                    <li><a href="#">CALCULATORS</a></li>                </ul>            </div>         </div>    </nav>        <div id="page">      Page Top      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      <div id="startchange">Start Change Div</div>      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      Page Bottom    </div></div>