1
したがって、ユーザーがセクションをスクロールするときにNavbar（.nav> li> a）を更新しようとしています。ユーザーがスクロールするとNavbarが更新される
各ナビアイテムには独自の色が必要です。
スクロールするNav項目を取得できますが、ユーザーがその項目をスクロールしているときに、各.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は、画面上のセクションと同じ背景色で更新する必要があります。
ユーザーがスクロールすると、ナビゲーションバーは、ユーザーが現在開いているセクションに動的に更新する必要があります。
私はそれが意味をなさないのかどうかわかりませんが、もっと簡単に人生を楽しくしてください。
清潔なアプローチ+1 –
おかげさまで、ありがとうございました。多くの方々は30分 –