滚动后更改导航栏颜色？

Question 1

如何设置没有背景色的导航栏？

div后向下滚动时，导航栏将获得新的背景色（导航栏应固定在顶部，我navbar-fixed-top在Bootstrap中使用）

我尝试了一些教程，但没有成功。

这是网站：http : //attafothman.olympe.in/
我在说的是顶部的黑色导航栏。

Question 2

这是在窗口滚动后如何更改导航栏颜色的最简单方法：

将关注JS添加到头部：

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

和这个CSS代码

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

当滚动超过导航栏的高度时，固定导航栏的背景颜色将变为白色。

请参阅关注JsFiddle

Question 3

这是一个jsfiddle示例。使用Jquery根据滚动像素位置更改背景颜色。

这是使用引导程序的小提琴

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

Question 4

这是一个简单的纯JavaScript

var myNav = document.getElementById('mynav');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

在某些Chrome版本中，存在以下错误：

document.body.scrollTop

因此您可以添加以下条件：

 if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )

确保您必须参加2节课

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}

Question 5

<script>
    $(document).ready(function(){
      $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
          $(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
        }
      });
    });
</script>

Question 6

这可以使用jQuery完成。

这是小提琴的链接。

窗口滚动时，将比较窗口顶部和窗口高度之间的距离。如果if语句为true，则背景色设置为透明。当您滚动回到顶部时，颜色会恢复为白色。

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > $(window).height()){
            $(".menu").css({"background-color":"transparent"});   
        }
        else{
            $(".menu").css({"background-color":"white"});
        }

    })
})

Question 7

今天，我经历了同样的问题，即如何将navbar background-color更改为scrolling。我一直在寻找仅使用CSS的解决方案，而不使用jquery，bootstrap或javascript。但是后来发现，尚不能仅使用CSS进行操作（截至2019年12月）。并且必须选择，我会坚持使用核心技术-javascript而不是jquery或bootstrap，除非使用js比使用其他方法复杂得多。但是幸运的不是。

下面是代码：
-它使用onscroll/ scrollevent ofwindow触发事件监听器。
-在事件监听器中，使用pageYOffset/ scrollYofwindow检查滚动状态。

浏览器支持看似两者的相同：
- https://caniuse.com/#search=pageYOffset
- https://caniuse.com/#search=scrollY

var navbar = document.querySelector('nav')

window.onscroll = function() {

  // pageYOffset or scrollY
  if (window.pageYOffset > 0) {
    navbar.classList.add('scrolled')
  } else {
    navbar.classList.remove('scrolled')
  }
}

body {
  margin: 0;
  padding: 0;
  background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
}

nav {
  position: -webkit-sticky;
  position: sticky;
  /* sticky or fixed are fine */
  position: fixed;
  top: 0;
  height: 69px;
  width: 100%;
  background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
  transition: background .5s; /* control how smooth the background changes */
}

nav.scrolled {
  background: #0a0a0a;
}

main {
  height: 200vh;
}

<nav></nav>
<main></main>

展开摘要

Question 8

我认为此解决方案比旧的解决方案更短，更简单。这是Js代码：

const navbar = document.querySelector('.nav-fixed');
window.onscroll = () => {
    if (window.scrollY > 300) {
        navbar.classList.add('nav-active');
    } else {
        navbar.classList.remove('nav-active');
    }
};

而我的CSS：

header.nav-fixed {
    width: 100%;
    position: fixed;
    transition: 0.3s ease-in-out;
}

.nav-active {
    background-color:#fff;
    box-shadow: 5px -1px 12px -5px grey;
}

Question 9

window.addEventListener('scroll', function (e) {
        var nav = document.getElementById('nav');
        if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
                nav.classList.add('nav-colored');
                nav.classList.remove('nav-transparent');
            } else {
                nav.classList.add('nav-transparent');
                nav.classList.remove('nav-colored');
            }
    });

使用事件侦听器的最佳方法。特别是对于Firefox浏览器，请选中此文档滚动链接效果，并且Firefox已不再受支持document.body.scrollTop并且可以替代使用document.documentElement.scrollTop。这就完成了Yahya Essam的回答

Question 10

与上述答案略有不同，但使用Vanilla JS：

var nav = document.querySelector('nav'); // Identify target

window.addEventListener('scroll', function(event) { // To listen for event
    event.preventDefault();

    if (window.scrollY <= 150) { // Just an example
        nav.style.backgroundColor = '#000'; // or default color
    } else {
        nav.style.backgroundColor = 'transparent';
    }
});

Question 11

我使用WordPress附带下划线。因此，当您注册主题脚本时，将使用“ jquery”和“下划线”作为依赖项数组的句柄。如果您不使用WordPress，请确保在脚本之前加载jQuery框架和Underscore。

CodePen：https：//codepen.io/carasmo/pen/ZmQQYy

要进行此演示（请记住，它需要jQuery和Underscore）。

HTML：

<header class="site-header">
  <div class="logo">
  </div>
  <nav>navigation</nav>
</header>

<article>
  Content with a forced height for scrolling.  Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling
</article>

CSS：

body,
html {
    margin: 0;
    padding: 0;
    font: 100%/180% sans-serif;
    background: #eee;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

article {
    height: 2000px;
    padding: 5%;
    background: #fff;
    margin: 2% auto;
    max-width: 900px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}


.site-header {
    background: #fff;
    padding: 20px 5%;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
    transition: all .5s ease-in-out;
    -web-kit-position: sticky;
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.logo {
    background-image: url('the-path-to-the-logo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 200px;
    height: 60px;
    background-size: contain;
    transition: width .5s ease-in-out, height .5s ease-in-out;
}

.site-header nav {
    text-align: right;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

.site-header.is-scrolling {
    opacity: .8;
    background: tomato;
    padding: 10px 5%;
}

.site-header.is-scrolling .logo {
    height: 40px;
    width: 100px;
}

jQuery的：

( function( window, $, undefined ) {

    'use strict';

    ////////////// Begin jQuery and grab the $ ////////////////////////////////////////

    $(document).ready(function() {

      function is_scrolling() {

        var $element = $('.site-header'),
            $nav_height = $element.outerHeight( true );

        if ($(this).scrollTop() >= $nav_height ) { //if scrolling is equal to or greater than the nav height add a class

          $element.addClass( 'is-scrolling');

        } else { //is back at the top again, remove the class

          $element.removeClass( 'is-scrolling');
        }

      }//end is_scrolling();

    $(window).scroll(_.throttle(is_scrolling, 200));


  }); //* end ready


})(this, jQuery);

Question 12

我最近所做的与上面的一些示例稍有不同，所以我想分享一下，尽管很晚！

首先是HTML，请注意，标头中只有一个类：

<body>

<header class="GreyHeader">
</header>


</body>

和CSS：

body {
height: 3000px;
}

.GreyHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}

.FireBrickRed {
height: 100px;
background-color: #b22222;
position: fixed;
top:200;
width: 100%;
}

.transition {
  -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
  transition: height 2s;
}

html只使用.greyHeader类，但是在CSS中，一旦滚动到达顶部的某个点，我就创建了另一个类来调用：

$(function() {
    var header = $(".GreyHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('GreyHeader').addClass("FireBrickRed ");
            header.addClass("transition");
        } else {
            header.removeClass("FireBrickRed ").addClass('GreyHeader');
            header.addClass("transition");
        }
    });
});

检查这个小提琴：https : //jsfiddle.net/29y64L7d/1/

Question 13

所以我正在使用querySelector获取导航栏
我在窗口中添加了一个滚动事件以跟踪scrollY属性
我检查它是否高于50，然后将活动类添加到导航栏中，否则，如果已包含该活动类，则将其删除，并且我很确定可以进一步简化条件。

我制作了这个Codepen来帮助您！

const navbar = document.querySelector('#nav')

window.addEventListener('scroll', function(e) {
  const lastPosition = window.scrollY
  if (lastPosition > 50 ) {
    navbar.classList.add('active')
  } else if (navbar.classList.contains('active')) {
    navbar.classList.remove('active')
  } else {
    navbar.classList.remove('active')
  }
})

Question 14

$(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() >1290 ) { 
          $(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)"); 
        }else if ($(document).scrollTop() >850) { 
            $(".navbar-fixed-top").css("background-color", "black"); 
          }else if ($(document).scrollTop() >350) { 
            $(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)"); 
          }
         else {
          $(".navbar-fixed-top").css("background-color", "red"); 
        }
      });
    });

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);
body {
  font-family: "Roboto Slab", sans-serif;
  position: relative;
}

h1,
h2,
h3,
h4 {
  font-family: "Open Sans", sans-serif;
}

.main {
  padding-top: 50px;
}

#home {
  padding-top: 20%;
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s31.postimg.org/l5q32ptln/coffee_cup_mug_apple.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  height: 100vh;
}

#home h2 {
  color: white;
  font-size: 4em;
}

#home h4 {
  color: white;
  font-size: 2em;
}

#home ul {
  list-style-type: none;
  text-align: center;
}

#home li {
  padding-bottom: 12px;
  padding-right: 12px;
  display: inline;
}

#home li:last-child {
  padding: 0;
}

@media (max-width: 710px) {
  #home li {
    display: block;
  }
}

.img-style {
  height: 200px;
  width: 200px;
  margin-top: 50px;
}

#about {
  height: 100vh;
  padding-top: 10%;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s32.postimg.org/sm6o6617p/photo_1432821596592_e2c18b78144f.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: white;
}

#about p,
li {
  font-size: 17px;
}

.navbar.color-yellow {
  background-color: yellow;
  height: 50px;
  color: yellow;
}

.navbar.color-change {
  background-color: #f45b69;
  height: 50px;
  color: rgba(255, 254, 255, 0.8);
}

#portfolio {
  padding-top: 30px;
  rgba(226,
  226,
  226,
  1);
  background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 25%, rgba(219, 219, 219, 1) 57%, rgba(254, 254, 254, 1) 100%);
  height: 100vh;
}

#portfolio .block .portfolio-contant ul li {
  float: left;
  width: 32.22%;
  overflow: hidden;
  margin: 6px;
  position: relative;
}

#portfolio .block .portfolio-contant ul li:hover .overly {
  opacity: 1;
}

#portfolio .block .portfolio-contant ul li:hover .position-center {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

#portfolio .block .portfolio-contant ul li a {
  display: block;
  color: #fff;
}

#portfolio .block .portfolio-contant ul li a h2 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#portfolio .block .portfolio-contant ul li a p {
  font-size: 15px;
}

#portfolio .block .portfolio-contant ul li a span {
  font-style: italic;
  font-size: 13px;
  color: #655E7A;
}

#portfolio .block .portfolio-contant ul img {
  width: 100%;
  height: auto;
}

#portfolio .block .portfolio-contant .overly {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
  text-align: center;
}

#portfolio .block .portfolio-contant .position-center {
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translate(0%, 50%);
  -moz-transform: translate(0%, 50%);
  -ms-transform: translate(0%, 50%);
  transform: translate(0%, 50%);
  -webkit-transition: .5s all;
  -o-transition: .5s all;
  transition: .5s all;
}

#contact {
  height: 100vh;
  padding-top: 10%;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

#contact h3 {
  color: white;
}

footer ul {
  list-style-type: none;
  text-align: center;
}

footer li {
  display: inline;
  padding-right: 10px;
}

footer li:last-child {
  padding: 0;
}

footer p {
  color: grey;
  font-size: 11px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
          <a class="navbar-brand" href="#featured">Portfolio</a>
        </div>
        <!-- navbar-header -->
        <div class="collapse navbar-collapse" id="collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!-- collapse navbar-collapse -->

      </div>
      <!-- container -->
    </nav>
  </header>

  <div class="main">
    <div class="row " id="home" data-speed="2" data-type="background">
      <div class="container">
        <h2 class="text-center">Welcome to my portfolio</h2>
        <h4 class="text-center">Where awesomeness is crafted</h4>
        <hr>
        <ul>
          <li><a href="https://github.com/vamshi121" class="btn btn-primary"><i class="fa fa-github"></i> GitHub</a></li>
          <li><a href="https://tn.linkedin.com/in/mannemvamshi" class="btn btn-primary"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
          <li><a href="https://freecodecamp.com/" class="btn btn-primary"><i class="fa fa-fire"></i> FreeCodeCamp</a></li>

        </ul>
      </div>
      <!--container-->

    </div>
    <!--home-->
    <div class="row" id="about" data-speed="2" data-type="background">
      <div class="container">
        <div class="row">
          <div class="col-md-5 col-md-offset-1">
            <h2>About me</h2>
            <p>Courteous and Enthusiastic,I'm interested in IT and around in its globe. I began to be fascinated by web programming i.e, building websites and developing cross-platform apps.I'm always looking for new ventures where i can learn evolve and
              expertise.
              </marquee>
          </div>
          </p>
          <p>My skills are:
            <ul>
              <li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>
              <li>Back-end: Ruby on Rails</li>
              <li>Methodology: Agile, TDD</li>
            </ul>
          </p>
        </div>
        <!--col-md-5-->
        <div class="col-md-4 col-md-offset-1">
          <img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />
        </div>
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--about-->
  <div class="row" id="portfolio" data-speed="2" data-type="background">
    <div class="container">
      <h2 class="text-center">Portfolio projects</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="block">
            <div class="portfolio-contant">
              <ul id="portfolio-contant-active">
                <li class="mix Branding">
                  <a href="#">
                    <img src="#" alt="">
                    <div class="overly">
                      <div class="position-center">
                        <h2>Local Support</h2>


                      </div>
                    </div>
                    <!--overly-->
                  </a>
                </li>
              </ul>
            </div>
            <!--portfolio-contant-->
          </div>
          <!--block-->
        </div>
        <!--col-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--portfolio-->
  <div class="row" id="contact" data-speed="2" data-type="background">
    <div class="container">
      <div class="col-md-4 col-md-offset-1">
        <h3>Contact me at:</h3>
        <h3>thegreatvamshi@triketech.com</h3>
      </div>
      <!--col-md-4-->
    </div>
    <!--container-->
  </div>
  <!--contact-->
  </div>
  <!--main-->
  <footer>
    <ul>
      <li><a href="#home">Home</a> </li>
      <li><a href="#about">About</a> </li>
      <li><a href="#portfolio">Portfolio</a> </li>
      <li><a href="#contact">Contact</a> </li>
    </ul>
    <p class="text-center">Copyright &copy; - All Rights Reserved. </p>
  </footer>

</body>

</html>

展开摘要

<script> 
    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() >1920 ) { 
          $(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)"); 
        } else if ($(document).scrollTop() >1580) { 
            $(".navbar-fixed-top").css("background-color", "black"); 
        } else if ($(document).scrollTop() >620) { 
            $(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)"); 
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); 
        }
      });
    });
</script>

Question 15

在这里检查jquery waypoints

小提琴例如JSFiddle

当滚动到某个div时，在jquery中更改背景颜色。

Question 16

$(window).on('activate.bs.scrollspy', function (e,obj) {

  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    return;
  }
  
  var isBGLight = $(obj.relatedTarget).hasClass('nav_white');
  var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');
  $('.menu').removeClass('nav_white');
  $('.menu').removeClass('nav_blue');
  if(isBGDark)
  {
    $('.menu').addClass('nav_white');
  }else if(isBGLight)
  {
    $('.menu').addClass('nav_blue');
  }
  /*var isScrolled = $(document).scrollTop() > 1;
    $('.menu').toggleClass('scrolled', isScrolled);
    $(".demos").toggleClass("demo");
    $(".demos").toggleClass("demo1");
  var posicionActual = $(document).scrollTop();
  $.each($('.nav_transparent'),function(){
    if ($(this).position().top < posicionActual){
      $("nav.menu").removeClass("nav_white");
      $("nav.menu").removeClass("nav_blue");
      $("nav.menu").addClass("nav_transparent");
      $(".demos").removeClass("demo");
      $(".demos").addClass("demo1");
      $(".cls").removeClass("cls2");
      $(".cls").addClass("cls1");
      $(".cl").removeClass("cl2");
      $(".cl").addClass("cl1");
      $(".hamb-bottom").css({"background-color": "#fff"});
      $(".hamb-middle").css({"background-color": "#fff"});
      $(".hamb-top").css({"background-color": "#fff"});
    }
  });
  $.each($('.nav_blue'),function(){
    if ($(this).position().top <= posicionActual){
      $("nav.menu").removeClass("nav_transparent");
      $("nav.menu").removeClass("nav_white");
      $("nav.menu").addClass("nav_blue");
      $(".demos").removeClass("demo1");
      $(".demos").addClass("demo");
      $(".cls").removeClass("cls2");
      $(".cls").addClass("cls1");
      $(".cl").removeClass("cl2");
      $(".cl").addClass("cl1");
      $(".hamb-bottom").css({"background-color": "#fff"});
      $(".hamb-middle").css({"background-color": "#fff"});
      $(".hamb-top").css({"background-color": "#fff"});
    }
  });
  $.each($('.nav_white'),function(){
    if ($(this).position().top <= posicionActual){
      $("nav.menu").removeClass("nav_blue");
      $("nav.menu").removeClass("nav_transparent");
      $("nav.menu").addClass("nav_white");
      $(".demos").removeClass("demo");
      $(".demos").addClass("demo1");
      $(".cls").removeClass("cls1");
      $(".cls").addClass("cls2");
      $(".cl").removeClass("cl1");
      $(".cl").addClass("cl2");
      $(".hamb-bottom").css({"background-color": "#4285f4"});
      $(".hamb-middle").css({"background-color": "#4285f4"});
      $(".hamb-top").css({"background-color": "#4285f4"});
    }
  });*/
});
$(window).on("scroll", function(){
  if($(document).scrollTop() < 10)
    {
      $('.nav').removeClass('nav_white');
      $('.nav').removeClass('nav_blue');
      $('.nav').removeClass('nav_transparent');
      $('.nav').addClass('nav_transparent');
  }
});

展开摘要

解决方案，也许

Question 17

首先，在nav div （exp：id =“ nav”）内创建一个名为nav的ID（可以更改所需内容），然后在完成body标签的底部。您添加此代码

<script>
  $(document).ready(function()
  $(window).scroll(function(){
   var scroll = $(window).scrollTop();
     if(scroll>50){
      $("#nav").css("background", "#555");
       }
       else {
      $("#nav").css("background", "transparent");
       }
      })
   })
</script>

Question 18

如何在路口观察API？这避免了使用滚动事件的潜在迟缓。

的HTML

<nav class="navbar-fixed-top">Navbar</nav>
<main>
  <div class="content">Some content</div>
</main>

的CSS

.navbar-fixed-top-滚动更改导航栏背景颜色。当向下滚动内容div不再100％可见时，它将添加到导航栏。

.navbar-fixed-top {
  position: sticky;
  top: 0;
  height: 60px;
}

.navbar-fixed-top--scrolled {
  /* change background-color to whatever you want */
  background-color: grey;
}

JS

创建观察者以确定内容div何时与浏览器视口完全相交。

回调函数称为：

最初要求观察者第一次观看目标元素
当内容div不再完全可见时（由于阈值：1）
当内容div完全可见时（由于阈值：1）

isIntersecting指示内容div（目标元素）是否与观察者的根（默认为浏览器视口）完全相交。

// callback function to be run whenever threshold is crossed in one direction or the other
const callback = (entries, observer) => {
  const entry = entries[0];
  
  // toggle class depending on if content div intersects with viewport
  const navBar = document.querySelector('.navbar-fixed-top');
  navBar.classList.toggle('navbar-fixed-top--scrolled', !entry.isIntersecting);
}

// options controls circumstances under which the observer's callback is invoked
const options = {
  // no root provided - by default browser viewport used to check target visibility
  // only detect if target element is fully visible or not
  threshold: [1]
};

const io = new IntersectionObserver(callback, options);

// observe content div 
const target = document.querySelector('.content');
io.observe(target);

IntersectionObserver选项

当前，内容div开始移出屏幕时，导航栏当前会更改背景颜色。

如果我们希望背景的变化，一旦当用户滚动，我们可以使用rootMargin属性（上，右，下，左）和上边距设置为负的导航栏的（在我们的案例60像素）的高度。

const options = {
  rootMargin: "-60px 0px 0px 0px",
  threshold: [1]
};

您可以在CodePen上看到以上所有内容。凯文鲍威尔（Github和YouTube）也对此有很好的解释。