-2
ページを次のテンプレートにスクロールしながら、メニュー要素の色をに変更します。私はいくつかの方法に従ったが、それは動的ではない。 動的に変更するにはどうすればよいですか？スクロール中にメニュー要素の色を変更するにはどうすればよいですか？
$(document).ready(function(){
//scrolling animation
\t $('.navigation a').on('click',function(){
\t \t var target = $(this);
\t \t var element = target.attr('href');
\t \t
\t \t $('.navigation a').removeClass('active');
\t \t target.addClass('active');
\t \t navHeight = $(".navigation").height();
\t $("body, html").animate({
\t scrollTop: $(element).offset().top + navHeight - 120
\t }, 800);
\t });
\t //changing color of menu elements when scrolling
\t $(window).scroll(function() {
\t \t var scrollTop = $(document).scrollTop();
\t \t if(scrollTop < 1000) {
\t \t \t $(".navigation a").removeClass('active');
\t \t \t $("a[title='About']").addClass('active');
\t \t }
\t \t else if(scrollTop > 1001 && scrollTop < 2000) {
\t \t \t $(".navigation a").removeClass('active');
\t \t \t $("a[title='Work']").addClass('active');
\t \t }
\t \t else if(scrollTop > 2001 && scrollTop < 3000) {
\t \t \t $(".navigation a").removeClass('active');
\t \t \t $("a[title='Clients']").addClass('active');
\t \t }
\t \t else if(scrollTop > 3001 && scrollTop < 4200) {
\t \t \t $(".navigation a").removeClass('active');
\t \t \t $("a[title='Blogs']").addClass('active');
\t \t }
\t \t else if(scrollTop > 4200 && scrollTop < 4600) {
\t \t \t $(".navigation a").removeClass('active');
\t \t \t $("a[title='Contact']").addClass('active');
\t \t }
});
});* {
\t list-style-type: none;
\t padding: 0;
\t margin: 0;
}
body {
\t font-size: 16px; \t \t
\t background: #eee;
\t padding-top: 90px;
\t font-family: 'Roboto',Arial, Helvetica, Sans-serif;
\t overflow-x: hidden;
}
.navigation {
\t top: 0;
\t left: 0;
\t padding: 0 10%;
\t width: 100%;
\t position: fixed;
\t color: #fff;
\t box-sizing: border-box;
\t background: #363636;
\t text-align: center;
}
.navigation a {
\t color: inherit;
\t margin: 35px 5px;
\t line-height: 150%; \t
\t padding: 0 5px 0 20px;
\t display: inline-block;
\t text-decoration: none;
\t border-left: 1px solid #fff;
}
.navigation a.active { color: yellow;}
.navigation a:first-child { border: 0; }
.box {
\t width: 100vw;
\t height: 100vh;
\t font-size: 14vw;
\t padding-top: 100px;
\t text-align: center; \t
\t 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; }<html>
<head>
\t <title>ScrollSpy</title>
\t <link rel="stylesheet" type="text/css" href="scrollspy.css">
</head>
<body>
\t <nav class="navigation">
\t \t <a class="active" href="#about" title="About">About</a>
\t \t <a href="#work" title="Work">Work</a>
\t \t <a href="#clients" title="Clients">Clients</a>
\t \t <a href="#blogs" title="Blogs">Blogs</a>
\t \t <a href="#contact" title="Contact">Contact</a>
\t </nav>
\t
\t <div id="container">
\t \t <div id="about" class="box">
\t \t \t About
\t \t </div>
\t \t <div id="work" class="box">
\t \t \t Work \t
\t \t </div>
\t \t <div id="clients" class="box">
\t \t \t Clients
\t \t </div>
\t \t <div id="blogs" class="box">
\t \t \t Blogs
\t \t </div>
\t \t <div id="contact" class="box">
\t \t \t Contact
\t \t </div>
\t </div>
\t <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
\t <script type="text/javascript" src="scrollspy.js"></script>
\t
</body>
</html>