如何确定哪一段属于视野？

Question

我在屏幕的左侧有导航，当我点击它们时，屏幕会滚动到屏幕的特定部分。但是当切换到所需的部分时，锚点的颜色不会改变，这是我的网站的外观：(我可以这样做，这样当我点击锚点时，颜色就会改变，但如果你不是点击锚点，而是滚动到网站的所需部分，那么颜色就不会改变)*

​

// Smooth transition
const anchors = document.querySelectorAll('a.scroll-to')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
    e.preventDefault()
    
    const blockID = anchor.getAttribute('href')
    
    document.querySelector(blockID).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  })
}

// Preloader
document.body.onload = function(){

	setTimeout( function() {
		var preloader = document.getElementById( 'page-preloader' );
		if (!preloader.classList.contains('done')) {
			preloader.classList.add('done');
		}
	}, 1000);
}




//////////////////////////////////////////////////////////////
//  $(document).ready(function() {							//
//     $("[href]").each(function() {						//
//         if (this.href == window.location.href) {			//
//             $(this).addClass("active");					//
//         }												//
//     });													//
// });														//
//////////////////////////////////////////////////////////////



// SideBar NavColor
$(document).ready(function(){
   $("a.nav-a").click(function () {
      // switch all tabs off
      $(".active").removeClass("active");
      // switch this tab on
      $(this).addClass("active");
   });
});


//Section [visible]
$(document).ready(function() {
	var windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.section').each(function() {
			var self = $(this),
			height = self.offset().top + self.height();
			if ($(document).scrollTop() + windowHeight >= height) {
				// как определить какая секция попало в поле зрение?
				var secId = $(self).attr('id');
				console.log(secId);
				//
			}
		});
	});
});

// Width
var WindowsSize=function(){
        var h=$(window).height(),
            w=$(window).width();
        $("#winSize").html();
    };
   $(document).ready(WindowsSize); 
   $(window).resize(WindowsSize); 
// "<p>Width: "+w+"<br>Height: "+h+"</p>"





// Height
$(".screen-height").height($(window).height());

$(window).resize(function(){
$(".screen-height").height($(window).height());
});

/*Fonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

/*Colors*/
:root {
  --color-1: #481744;
  --color-2: #202AAE;
  --color-3: #C81C88;
  --color-4: #CA71E5;
  --color-5: #0A80FB;
  /*var(--color-1);*/
}
.color{
	display: inline-flex;
	position: absolute;
	right: 0;
	top: 0;
}
.color-1{
	width: 50px;
	height: 50px;
	background-color: var(--color-1);
}
.color-2{
	width: 50px;
	height: 50px;
	background-color: var(--color-2);
}
.color-3{
	width: 50px;
	height: 50px;
	background-color: var(--color-3);
}
.color-4{
	width: 50px;
	height: 50px;
	background-color: var(--color-4);
}
.color-5{
	width: 50px;
	height: 50px;
	background-color: var(--color-5);
}
/*Preloader*/
.preloader{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color-1);;
	z-index: 3;
	transition: 1s all;
	opacity: 1;
	visibility: visible;
}
.loader{
    height: 75px;
    width: 75px;
	border: 10px solid var(--color-4);;
	border-radius: 50%;
	border-top-color: var(--color-3);;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: 1s spin infinite linear;
}

.done {
	opacity: 0;
	visibility: hidden;
}
@keyframes spin{
	from{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/*Sections*/
section{
	margin-left: 80px;
}
#home{
	
}
#about{
	background-color: var(--color-2);
}
#skills{

}
#portfolio{
	background-color: var(--color-2);
}
#testimonials{

}
#contact{
	background-color: var(--color-2);
}
/*SideBar*/
.sidebar{
/*	display: grid;
	align-content: center;*/
	text-align: center;
	background-color: var(--color-1);
	width: 80px;
	position: fixed;
	left: 0px;
	top: 0px;
}
.sidebar .icon{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 25px;
	left: 15px;
	right: 15px;
	border-radius: 50%;
	background: url(../../static/images/ava.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	background-color: var(--color-3);
}
.sidebar .nav{
	margin-left: 20px;
	margin-right: 20px;
	position: absolute;
	bottom: 15%;
	top: 15%;
}
.sidebar .nav a{
	width: 40px;
	height: 50px;
	margin-top: 50px;
	margin-bottom: 50px;
	text-decoration: none;
	color: var(--color-4);
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 35px;
	line-height: 41px;
	display: block;
	align-items: center;
	text-align: center;
}
.sidebar .nav .active{
	color: var(--color-3);
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<!-- CSS -->
	<link rel="stylesheet" href="media/css/style.css">

    <title>Orxan Kerimov</title>
  </head>
  <body>
<!-- 	<div class="preloader" id="page-preloader">
      <div class="loader"></div>
    </div> -->
  	<!-- Colors -->
	<div class="color">
		<div class="color-1"></div>
		<div class="color-2"></div>
		<div class="color-3"></div>
		<div class="color-4"></div>
		<div class="color-5"></div>
	</div>
	<!-- SideBar -->
	<div class="sidebar screen-height">
		<!-- SideBar Icon -->
		<div class="icon"></div>
		<!-- SideBar Navigation -->
		<div class="nav">
			<ul style="list-style: none; padding: 0; margin: 0;">
				<li><a href="#home" class="scroll-to nav-a active">H</a></li>
				<li><a href="#about" class="scroll-to nav-a">A</a></li>
				<li><a href="#skills" class="scroll-to nav-a">S</a></li>
				<li><a href="#portfolio" class="scroll-to nav-a">P</a></li>
				<li><a href="#testimonials" class="scroll-to nav-a">T</a></li>
				<li><a href="#contact" class="scroll-to nav-a">C</a></li>
			</ul>
		</div>
	</div>
	<!-- Home -->
  	<section class="screen-height section" id="home">
  		<div class="row">
			<!-- Icon -->
			<div class="icon"></div>
  		</div>
  	</section>
  	<!-- About -->
  	<section class="screen-height section" id="about">
  		<div class="row">
  		</div>
  	</section>
  	<!-- Skills -->
  	<section class="screen-height section" id="skills">
  		<div class="row">
  		</div>
  	</section>
  	<!-- Portfolio -->
  	<section class="screen-height section" id="portfolio">
  		<div class="row">
  		</div>
  	</section>
  	<!-- Testimonials -->
  	<section class="screen-height section" id="testimonials">
  		<div class="row">
  		</div>
  	</section>
  	<!-- Contact -->
	<section class="screen-height section" id="contact">
  		<div class="row">
  		</div>
  	</section>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- JS -->
    <script src="media/js/main.js"></script>
    <script src="media/js/WidthHeight.js"></script>
  </body>
</html>

​

Answer 1

​

//Active archor
var menu_selector = ".nav"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню.
function onScroll(){
var scroll_top = $(document).scrollTop();
$(menu_selector + " a").each(function(){
var hash = $(this).attr("href");
var target = $(hash);
if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
$(menu_selector + " a.active").removeClass("active");
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
}
$(document).ready(function () {
$(document).on("scroll", onScroll);
$("a[href^=#]").click(function(e){
e.preventDefault();
$(document).off("scroll");
$(menu_selector + " a.active").removeClass("active");
$(this).addClass("active");
var hash = $(this).attr("href");
var target = $(hash);
$("html, body").animate({
scrollTop: target.offset().top
}, 500, function(){
window.location.hash = hash;
$(document).on("scroll", onScroll);
});
});
});

​