Я хочу сделать навигационное меню при прокрутке страницы, чтобы выделить?

Question

Вот пример того, что я хочу.

https://insights.stackoverflow.com/survey/2018?utm_source=hackernewsletter&utm_medium=email&utm_term=code

• Здесь вы можете видеть, когда прокручиваете левые блики меню.
• Также, когда есть подменю меню, подменю будет расширяться, когда Выделите меню. а в другом меню свернуть

Я хочу это с помощью чистого JavaScript, без сторонней библиотеки.

Есть идеи, как это сделать.

Answer 1

Подсветка навигации по одной странице от Codepen.

$(document).ready(function(){

   $("div").mouseenter(function(){
   	 var id = $(this).attr('id');
   	 $('a').removeClass('active');
   	 $("[href=#"+id+"]").addClass('active');
   });

});

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

body{
	font-family: Geneva, Tahoma, Verdana, sans-serif;
	margin: 0px;
}

.nav{
	width: 100%;
	height: 50px;
    background: rgba(200,200,200,0.2);
    position: fixed;
    top: 0px;
}

#menu{
	float: right;
   	font-size: 40px;
   	font-weight: normal;
   	padding-right: 20px;
   	color: rgba(100,100,100,0.9);;
}

.nav ul{
	width: 150px;
	list-style-type: none;
	background: rgba(200,200,200,0.2);
    border-radius: 5px;
}

#top-menu{
   clear: both;
   display: block;
   float: right;
   padding-left: 0px;
   margin-top: 10px;
   margin-right: 20px;

}
.links{
	color: black;
	font-size: 20px;
	font-weight: normal;
}

.nav ul li a{
	text-decoration: none;
	text-align: center;
	display: block;
	padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
	color: #fff;
	background-color: black;
	border-left: thick solid red;
}

#wrapper{
	margin-top: 50px;
}

.container{
	width: 800px;
	height: 600px;
	margin: 0px auto;
    background: rgba(200,200,200,0.2);
    border-bottom: 1px solid rgba(200,200,200,1);
    padding: 20px;
}

.active{
	color: white;
	background-color: rgba(100,100,100,1);
	border-left: thick solid rgba(0,255,0,0.5);
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
		<span id ="menu">&#9776;</span> 
		<ul id="top-menu">
			<li><a href="#one" class="links">Menu 1</a></li>
			<li><a href="#two" class="links">Menu 2</a></li>
			<li><a href="#three" class="links">Menu 3</a></li>
			<li><a href="#four" class="links">Menu 4</a></li>
			<li><a href="#five" class="links">Menu 5</a></li>
			<li><a href="#six" class="links">Menu 6</a></li>
		</ul>
	</div>
	<div id="wrapper">
		<div id="one" class="container">
			one
		</div>
		<div id="two" class="container">
			two
		</div>
		<div id="three" class="container">
			three
		</div>
		<div id="four" class="container">
			four
		</div>
		<div id="five" class="container">
			five
		</div>
		<div id="six" class="container">
			six
		</div>
	</div>

Answer 2

Вам, вероятно, стоит заглянуть в scrollTop .