jquery - 用户滚动时更新导航栏

标签 jquery html css twitter-bootstrap

所以我试图在用户滚动该部分时更新 Navbar(.nav>li>a)。

我的问题是每个 Nav-Item 必须有自己的颜色。

我可以让导航元素滚动，但我无法让 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 必须更新为与屏幕上的部分相同的背景颜色。

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

我不确定这是否有意义，但请继续提出任何问题以使生活更轻松。

最佳答案

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

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>

编辑: 由于你的已修复 导航，我现在为每个 offset().top 添加了 -50看起来更好。

关于jquery - 用户滚动时更新导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47793841/

上一篇：html - @font-face 帮助它不起作用

下一篇：javascript - 如何在 html 表格中给出分界线。？

相关文章：

CSS 使用标题文本获取背景图片 url

javascript - 如何因超时而停止轮询？

javascript - 使用 Javascript 添加类

php - jquery隐藏问题

javascript - 如何在事件发生后重写 jQuery 函数？

php - 使用 html5 和 php 上传多个文件

android - 向下滚动时触摸/单击区域在响应菜单中移位

html - 删除图像下方的空白区域

jquery - 使用 jQuery 在 div 之间添加 HTML

javascript - 对详细信息标签的摘要部分中的复选框输入有疑问吗？

©2024 IT工具网  联系我们