Question

我想在下面的模板中更改颜色的菜单元素，同时滚动页面。我遵循了一些方法，但它不是动态的。如何将其更改为动态？

＆＃13;

$(document).ready(function(){

//scrolling animation

	$('.navigation a').on('click',function(){ 

		var target = $(this);
		var element = target.attr('href');
		
		$('.navigation a').removeClass('active');
		target.addClass('active');

		navHeight = $(".navigation").height();

    	$("body, html").animate({ 
      	scrollTop: $( element ).offset().top + navHeight - 120 
    	}, 800);
	});

	 //changing color of menu elements when scrolling

	 $(window).scroll(function() {

	 	var scrollTop = $(document).scrollTop();

	 	if(scrollTop < 1000) {
	 		$(".navigation a").removeClass('active');
	 		$("a[title='About']").addClass('active');
	 	}
	 	else if(scrollTop > 1001 && scrollTop < 2000) {
	 		$(".navigation a").removeClass('active');
	 		$("a[title='Work']").addClass('active');
	 	}
	 	else if(scrollTop > 2001 && scrollTop < 3000) {
	 		$(".navigation a").removeClass('active');
	 		$("a[title='Clients']").addClass('active');
	 	}
	 	else if(scrollTop > 3001 && scrollTop < 4200) {
	 		$(".navigation a").removeClass('active');
	 		$("a[title='Blogs']").addClass('active');
	 	}
	 	else if(scrollTop > 4200 && scrollTop < 4600) {
	 		$(".navigation a").removeClass('active');
	 		$("a[title='Contact']").addClass('active');
	 	}
  });


});

＆＃13;

* {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

body {
	font-size: 16px;		
	background: #eee;
	padding-top: 90px;
	font-family: 'Roboto',Arial, Helvetica, Sans-serif;
	overflow-x: hidden;
}

.navigation {
	top: 0;
	left: 0;
	padding: 0 10%;
	width: 100%;
	position: fixed;
	color: #fff;
	box-sizing: border-box;
	background: #363636;
	text-align: center;
}
.navigation a {
	color: inherit;
	margin: 35px 5px;
	line-height: 150%;	
	padding: 0 5px 0 20px;
	display: inline-block;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation a.active { color: yellow;}
.navigation a:first-child { border: 0; }
.box {
	width: 100vw;
	height: 100vh;
	font-size: 14vw;
	padding-top: 100px;
	text-align: center;	
	background: #4CD2DA;
}
.box:nth-child(2) { background: #59DAE2; }
.box:nth-child(3) { background: #4372A6; }
.box:nth-child(4) { background: #D8E0E3; }
.box:nth-child(5) { background: #4B565A; }

＆＃13;

<html>
<head>
	<title>ScrollSpy</title>
	<link rel="stylesheet" type="text/css" href="scrollspy.css">
</head>
<body>
	<nav class="navigation">
		<a class="active" href="#about" title="About">About</a>
		<a href="#work" title="Work">Work</a>
		<a href="#clients" title="Clients">Clients</a>
		<a href="#blogs" title="Blogs">Blogs</a>
		<a href="#contact" title="Contact">Contact</a>
	</nav>
	
	<div id="container">
		<div id="about" class="box">
			About

		</div>
		<div id="work" class="box">
			Work	
		</div>
		<div id="clients" class="box">
			Clients
		</div>
		<div id="blogs" class="box">
			Blogs
		</div>
		<div id="contact" class="box">
			Contact
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
	<script type="text/javascript" src="scrollspy.js"></script>
	

</body>
</html>

＆＃13;

copepen example here

Answer 1

您只需要计算滚动到达其中一个框.box的时间，然后将类激活添加到相应的菜单项。

请参阅下面的代码段或jsFiddle

$(document).ready(function() {

  //scrolling animation

  $('.navigation a').on('click', function() {

    var target = $(this);
    var element = target.attr('href');

    $('.navigation a').removeClass('active');
    target.addClass('active');

    navHeight = $(".navigation").height();

    $("body, html").animate({
      scrollTop: $(element).offset().top + navHeight - 120
    }, 800);
  });

  //changing color of menu elements when scrolling

  $(window).scroll(function() {

    var scrollTop = $(document).scrollTop();

    $(".box").each(function() {
      var id = $(this).attr("id");
      var height = $(this).outerHeight();
      var oTop = $(this).offset().top - 120;
      if (scrollTop > oTop && scrollTop < oTop + height) {
        $(".navigation a[href='#" + id + "']").addClass("active");

      } else {
        $(".navigation a[href='#" + id + "']").removeClass("active");
      }
    });


  });


});

* {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

body {
  font-size: 16px;
  background: #eee;
  padding-top: 90px;
  font-family: 'Roboto', Arial, Helvetica, Sans-serif;
  overflow-x: hidden;
}

.navigation {
  top: 0;
  left: 0;
  padding: 0 10%;
  width: 100%;
  position: fixed;
  color: #fff;
  box-sizing: border-box;
  background: #363636;
  text-align: center;
}

.navigation a {
  color: inherit;
  margin: 35px 5px;
  line-height: 150%;
  padding: 0 5px 0 20px;
  display: inline-block;
  text-decoration: none;
  border-left: 1px solid #fff;
}

.navigation a.active {
  color: yellow;
}

.navigation a:first-child {
  border: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  font-size: 14vw;
  padding-top: 100px;
  text-align: center;
  background: #4CD2DA;
}

.box:nth-child(2) {
  background: #59DAE2;
}

.box:nth-child(3) {
  background: #4372A6;
}

.box:nth-child(4) {
  background: #D8E0E3;
}

.box:nth-child(5) {
  background: #4B565A;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
  <a class="active" href="#about" title="About">About</a>
  <a href="#work" title="Work">Work</a>
  <a href="#clients" title="Clients">Clients</a>
  <a href="#blogs" title="Blogs">Blogs</a>
  <a href="#contact" title="Contact">Contact</a>
</nav>

<div id="container">
  <div id="about" class="box">
    About

  </div>
  <div id="work" class="box">
    Work
  </div>
  <div id="clients" class="box">
    Clients
  </div>
  <div id="blogs" class="box">
    Blogs
  </div>
  <div id="contact" class="box">
    Contact
  </div>
</div>

如何在滚动时更改菜单元素的颜色？

1 个答案: