用户滚动时更新导航栏

Question

因此，当用户滚动该部分时，我正在尝试更新Navbar（.nav＆gt; li＆gt; a）。

我的问题是每个导航项必须有自己的颜色。

我可以让Nav-items滚动，但是当用户滚动该部分时，我无法动态地为每个导航项应用css .custom_active。

这是我到目前为止所做的：

JS：

var selector1 = '#menu_item1';
var selector2 = '#menu_item2';
var selector3 = '#menu_item3';
var selector3 = '#menu_item4';

$(document).ready(function() {
  $(".nav li a").removeClass("active");
});

$('.nav li a').on('click', function() {
  var scrollAnchor = $(this).attr('data-scroll'),
    scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
  $('body,html').animate({
    scrollTop: scrollPoint
  }, 500);
  return false;
})


$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  if (windscroll >= 100) {
    $(selector1).addClass('custom_active1');
    $(selector2).addClass('custom_active2');
    $(selector3).addClass('custom_active3');
    $(selector4).addClass('custom_active4');
    $('.wrapper section').each(function(i) {
      if ($(this).position().top <= windscroll - 20) {
        $('nav a.active').removeClass('active');
        $('nav a').eq(i).addClass('active');
      }
    });

  } else {

    $(selector1).removeClass('custom_active1');
    $(selector2).removeClass('custom_active2');
    $(selector3).removeClass('custom_active3');
    $(selector4).removeClass('custom_active4');
    $('nav a.active').removeClass('active');
    $('nav a:first').addClass('custom_active1');
  }

}).scroll();

CSS：

body {
  background-image: url(https://wallpaperscraft.com/image/blurry_colorful_rainbow_16063_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  max-height: 3000px;
  letter-spacing: 2px !important;
}

@media only screen and (max-width: 1500px) {
  body {
    background-size: auto;
  }
}

@media only screen and (max-width: 770px) {
  .nav>li {
    text-align: center;
  }
}

#background-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

.navbar {
  background: rgba(0, 0, 0, 0.73);
  border-radius: 0px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.43);
}

.navbar>.container-fluid>.navbar-header>a {
  color: white !important;
}

.nav>li>a {
  color: white !important;
}

.custom-containers {
  width: 100%;
  background: rgba(26, 85, 0, 0.49);
  height: 600px;
  top: 100px;
  position: absolute;
  text-align: center;
  color: white;
  border: 1px white solid;
  box-shadow: 0 0 50px black;
  padding-top: 50px;
}

#section1 {
  text-shadow: 1px 1px 1px black;
}

#section2 {
  background: rgba(85, 0, 82, 0.49);
  top: 1000px;
}

#section3 {
  background: rgba(0, 0, 85, 0.49);
  top: 1900px;
}

#section4 {
  background: rgba(26, 85, 0, 0.49);
  top: 2800px !important;
  -moz-margin-bottom: 100px !important;
}

.custom_active1 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

.custom_active2 {
  background: rgba(250, 144, 246, 0.3);
  transition: all 0.2s;
}

.custom_active3 {
  background: rgba(158, 158, 255, 0.3);
  transition: all 0.2s;
}

.custom_active4 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#section1">Designs by Cornelius</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="menu_item1"><a data-scroll="section1" href="#section1">Home</a></li>
        <li id="menu_item2"><a data-scroll="section2" href="#section2">My Skills</a></li>
        <li id="menu_item3"><a data-scroll="section3" href="#section3">My Gallery</a></li>
        <li id="menu_item4"><a data-scroll="section4" href="#section4">Contact Me</a></li>
      </ul>
    </div>
  </div>
</nav>

<section class="container-fluid custom-containers" id="section1" data-anchor="section1">
  <h1>Hi There,</h1>
  <br><br>
  <h1>My name is <b>Cornelius</b>, I am :</h1>
  <br><br>
  <h1>
    <p class="typewrite" data-period="2000" data-type='[ "A Front End Dev.", "Creative.", "Inspired.", "Passionate about development.", "Human." ]'>
      <span class="wrap"></span>
    </p>
  </h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section2" data-anchor="section2">
  <h1>My Skills</h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section3" data-anchor="section3">
  <h1>My Gallery</h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section4" data-anchor="section4">
  <h1>Contact Me</h1>
</section>

<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>
<script src="scripts.js"></script>

因此每个Nav-Item必须使用与屏幕上的部分相同的背景颜色进行更新。

当用户滚动时，导航栏必须动态更新到用户所在的任何部分。

我不确定这是否有意义，但请继续并提出任何要求让生活更轻松的事。拜托。

Answer 1

通过获取每个部分的.offset().top，您可以对每个addClass

nav var selector1 = '#menu_item1'; var selector2 = '#menu_item2'; var selector3 = '#menu_item3'; var selector4 = '#menu_item4'; $(document).ready(function() { $(".nav li a").removeClass("active"); }); $('.nav li a').on('click', function() { var scrollAnchor = $(this).attr('data-scroll'), scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28; $('body,html').animate({ scrollTop: scrollPoint }, 500); return false; }) $(window).scroll(function() { var windscroll = $(window).scrollTop(); var sec1 = $('#section1').offset().top - 50; var sec2 = $('#section2').offset().top - 50; var sec3 = $('#section3').offset().top - 50; var sec4 = $('#section4').offset().top - 50; if (windscroll >= sec1) { $(selector1).addClass('custom_active1'); } // do not remove this class if (windscroll >= sec2) { $(selector2).addClass('custom_active2'); $(selector1).removeClass('custom_active1'); $(selector3).removeClass('custom_active3'); $(selector4).removeClass('custom_active4'); } else { $(selector2).removeClass('custom_active2'); } if (windscroll >= sec3) { $(selector3).addClass('custom_active3'); $(selector1).removeClass('custom_active1'); $(selector2).removeClass('custom_active2'); $(selector4).removeClass('custom_active4'); } else { $(selector3).removeClass('custom_active3'); } if (windscroll >= sec4) { $(selector4).addClass('custom_active4'); $(selector1).removeClass('custom_active1'); $(selector2).removeClass('custom_active2'); $(selector3).removeClass('custom_active3'); } else { $(selector4).removeClass('custom_active4'); } }).scroll();

body {
  background-image: url(https://wallpaperscraft.com/image/blurry_colorful_rainbow_16063_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  max-height: 3000px;
  letter-spacing: 2px !important;
}

@media only screen and (max-width: 1500px) {
  body {
    background-size: auto;
  }
}

@media only screen and (max-width: 770px) {
  .nav>li {
    text-align: center;
  }
}

#background-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

.navbar {
  background: rgba(0, 0, 0, 0.73);
  border-radius: 0px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.43);
}

.navbar>.container-fluid>.navbar-header>a {
  color: white !important;
}

.nav>li>a {
  color: white !important;
}

.custom-containers {
  width: 100%;
  background: rgba(26, 85, 0, 0.49);
  height: 600px;
  top: 100px;
  position: absolute;
  text-align: center;
  color: white;
  border: 1px white solid;
  box-shadow: 0 0 50px black;
  padding-top: 50px;
}

#section1 {
  text-shadow: 1px 1px 1px black;
}

#section2 {
  background: rgba(85, 0, 82, 0.49);
  top: 1000px;
}

#section3 {
  background: rgba(0, 0, 85, 0.49);
  top: 1900px;
}

#section4 {
  background: rgba(26, 85, 0, 0.49);
  top: 2800px !important;
  -moz-margin-bottom: 100px !important;
}

.custom_active1 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

.custom_active2 {
  background: rgba(250, 144, 246, 0.3);
  transition: all 0.2s;
}

.custom_active3 {
  background: rgba(158, 158, 255, 0.3);
  transition: all 0.2s;
}

.custom_active4 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#section1">Designs by Cornelius</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="menu_item1"><a data-scroll="section1" href="#section1">Home</a></li>
        <li id="menu_item2"><a data-scroll="section2" href="#section2">My Skills</a></li>
        <li id="menu_item3"><a data-scroll="section3" href="#section3">My Gallery</a></li>
        <li id="menu_item4"><a data-scroll="section4" href="#section4">Contact Me</a></li>
      </ul>
    </div>
  </div>
</nav>




<section class="container-fluid custom-containers" id="section1" data-anchor="section1">
  <h1>Hi There,</h1>
  <br><br>
  <h1>My name is <b>Cornelius</b>, I am :</h1>
  <br><br>
  <h1>
    <p class="typewrite" data-period="2000" data-type='[ "A Front End Dev.", "Creative.", "Inspired.", "Passionate about development.", "Human." ]'>
      <span class="wrap"></span>
    </p>
  </h1>
  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>

</section>




<section class="container-fluid custom-containers" id="section2" data-anchor="section2">
  <h1>My Skills</h1>

  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>
</section>




<section class="container-fluid custom-containers" id="section3" data-anchor="section3">
  <h1>My Gallery</h1>

  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>
</section>





<section class="container-fluid custom-containers" id="section4" data-anchor="section4">
  <h1>Contact Me</h1>



</section>





<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>
<script src="scripts.js"></script>

fixed

修改：根据-50导航，我为每个offset().top添加了 if (edittext.getText().toString().trim().length() > 10) { // go ahead }else{ // give error message } ，现在看起来更好了。