javascript - Change navbar color while scrolling - Stack Overflow

admin管理员组

文章数量:1324968

I Just did that way with pure javascript to change navbar color after scrolling, it worked with google chrome without any problem but when I tried to test it at firefox it's not working with it.

Anyone can give me any advice about this ? Thanks in advance.

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

window.onscroll = function () {
    "use strict";
    if (document.body.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=".1.1/jquery.min.js"></script>

<div id="nav" class="nav"></div>

I Just did that way with pure javascript to change navbar color after scrolling, it worked with google chrome without any problem but when I tried to test it at firefox it's not working with it.

Anyone can give me any advice about this ? Thanks in advance.

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

window.onscroll = function () {
    "use strict";
    if (document.body.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav" class="nav"></div>

• javascript
• jquery
• html
• css

Share Follow edited Oct 1, 2016 at 2:50 kukkuz 42.4k66 gold badges6464 silver badges102102 bronze badges asked Oct 1, 2016 at 2:25 Yahya EssamYahya Essam 1,91222 gold badges2525 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav" class="nav"></div>

If you are using jquery:

var myNav = $("#nav");

$(window).on('scroll', function() {
  "use strict";
  if ($(window).scrollTop() >= 280) {
    myNav.addClass("scroll");
  } else {
    myNav.removeClass("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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav" class="nav"></div>

$(window).scroll(function() {
if ($(this).scrollTop() > 20){  
  $('#navBar').css({property: "value"});
    } else {
        $('#navBar').css({property: "value"});
    }
});

Not really an answer, but this works great for me in all browsers that I've tested on (ie, edge, safari, chrome & firefox)

Try this. Change the "280" to how many px down you want to scroll before the navbar background color changes to transparent.

HTML:

<div id="navbar"></div>

JavaScript:

$(function() {
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 280) {
        //background on scroll
        $("#navbar").addClass("scroll");
    } else {
        //background at top
       $("#navbar").removeClass("scroll");
    }
  });
});

CSS:

#navbar {
background-color:#111;
transition:all .5s ease-in-out;
}
.scroll {
background-color:transparent;
}

本文标签： javascriptChange navbar color while scrollingStack Overflow