ナビゲーションバーの位置を変更します。色が変わらない

Question

ねえみんな私のnavbarの色をHTML文書の位置によって変えようとしています。最初は黒に変化しますが、それは再び変化しません。私は位置を正しく計算していますか？ここにコードがあります。

$(function() { 
    console.log('Running from the navBar.js') 

    var scrollStart = 0; 
    var $navStartChange = $('nav'); 
    var $navChild = $('.navigation-flex'); 
    var offset = $navStartChange.offset(); 
    var $portfolioPos = $('section#portfolio').position(); 
    var $openSourcePos = $('section#openSource').position(); 


    $(document).scroll(function() { 
     scrollStart = $(this).scrollTop(); 

     console.log('This is the position of the porfolio section: ' + $portfolioPos.top); 

     console.log('This is the position of offset: ' + offset.top); 

     if (scrollStart >= $portfolioPos.top) { 
      console.log('Arrived at the top of the portfolio section'); 

      $navStartChange.css('position', 'fixed'); 

      $navChild.css('background-color', '#2c3e50'); 
     } else if (scrollStart >= $openSourcePos.top) { 
      console.log('Arrived at the top of the openSource section'); 

      $navChild.css('background-color', 'green'); 
     } 
    }) /* End of scroll function */ 

}) 

main.haml

%nav 
     %ul.navigation-flex 
      %li 
      %a.logo{href:"index.html"} Home 
      %li 
      %a{href: "#about"} About 
      %li 
      %a{href: "#portfolio"} Work 
      %li 
      %a{href: "#labs"} Labs 
      %li 
      %a{href: "#contact"} Contact 
     %section#portfolio 
     %article.article--fritmark 
      .article--fritmark__img-container 
      .window--outer.isHidden 
       %span.btns 
       %span.browser-red 
       %span.browser-yellow 
       %span.browser-green 
       %span.newTab 
       %img.article--fritmark__img{src: "/img/screenshoots/favs.png", alt: "favs" }/ 
     %section#openSource 
     %h1.section-subheading Open Source Contributions 
     %h1.section-subheading Github Chart 

Answer 1

代わりに（非常に短いタイムスパンでの時間の途方もなく膨大な数に呼び出される）スクロールイベントに取り付けるまず、間隔に接続します（私の例では、間隔は5ミリ秒ごとです）。

getBoundingClientRect().topは、ページ内の要素のy位置を取得するのに適しています。 jQueryにはショートカットがありますが、ここではバニラのJSソリューションを探しています。

document.body.scrollTopは、ページのスクロール位置を取得するのに適しています。これは、ページ上の要素の境界矩形の上端とよく比較されます。

特定の問題を解決するための効果的な方法を見つけるために、次のコードをコードリファレンスとして使用してください。

var nav = document.getElementById("nav"), 
 
    about = document.getElementById("about"), 
 
    work = document.getElementById("portfolio"), 
 
    labs = document.getElementById("labs"), 
 
    contact = document.getElementById("contact"); 
 

 
var aboutTop = about.getBoundingClientRect().top, 
 
    workTop = work.getBoundingClientRect().top, 
 
    labsTop = labs.getBoundingClientRect().top, 
 
    contactTop = contact.getBoundingClientRect().top; 
 

 
var scroller = setInterval(function() { 
 
    var scrollTop = document.body.scrollTop; 
 
    var offset = 20; // So the color changes just a bit before reaching the position 
 
    scrollTop = scrollTop + offset; 
 
    
 
    if (scrollTop < aboutTop) { 
 
    nav.style['background-color'] = "#f0f0f0"; 
 
    } else if (scrollTop<workTop && scrollTop>=aboutTop) { 
 
    nav.style['background-color'] = "red"; 
 
    } else if (scrollTop<labsTop && scrollTop>=workTop) { 
 
    nav.style['background-color'] = "green"; 
 
    } else if (scrollTop<contactTop && scrollTop>=labsTop) { 
 
    nav.style['background-color'] = "black"; 
 
    } else if (scrollTop>=contactTop) { 
 
    nav.style['background-color'] = "blue"; 
 
    } 
 
}, 5);

body { 
 
    padding-top: 40px; 
 
} 
 
nav { 
 
    background-color: #f0f0f0; 
 
    padding: 5px 10px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
nav ul { 
 
    padding: 0; 
 
} 
 
nav ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 0 5px; 
 
} 
 
nav ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
nav ul li a:hover { 
 
    text-decoration: underline; 
 
} 
 
.anchor { 
 
    display: block; 
 
    position: relative; 
 
    top: -55px; 
 
    visibility: hidden; 
 
}

<nav id="nav"> 
 
    <ul> 
 
    <li><a href="#about">About</a></li> 
 
    <li><a href="#portfolio">Work</a></li> 
 
    <li><a href="#labs">Labs</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</nav> 
 
<a class="anchor" id="about"></a> 
 
<section id="about-section"> 
 
<h1>About</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p> 
 
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p> 
 
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p> 
 
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p> 
 
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p> 
 
</section> 
 
<a class="anchor" id="portfolio"></a> 
 
<section id="portfolio-section"> 
 
<h1>Work</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p> 
 
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p> 
 
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p> 
 
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p> 
 
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p> 
 
</section> 
 
<a class="anchor" id="labs"></a> 
 
<section id="labs-section"> 
 
<h1>Labs</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p> 
 
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p> 
 
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p> 
 
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p> 
 
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p> 
 
</section> 
 
<a class="anchor" id="contact"></a> 
 
<section id="contact-section"> 
 
<h1>Contact</h1> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p> 
 
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p> 
 
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p> 
 
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p> 
 
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p> 
 
</section>