Change appearance when going through section

Question

Change appearance when going through section

Navigation

#1 by (1 votes)

0

In this code below, I can make the item clicked change background-color , but I would like it to change without clicking, ie when I was passing through the corresponding <section> .

I know how to make it change with a certain event scrollTop , however I do not want to set a fixed size of each roll, but in a way that regardless of the content and size of the <section> change the background-color of the menu item.

How to do it?

$('.menu li').click(function(){
  $('.menu li').css('background-color', 'green');
  $(this).css('background-color', 'white');
})

* { margin: 0; padding: 0; }

.menu { text-align: center; position: fixed; width: 100%; }

.menu ul { list-style: none; display: inline; }

.menu li { display: inline-block; }

.menu a { text-decoration: none; color: #000; padding: 10px; display: inline-block; }

div { height: 300px; }

.blue { background-color: blue; }

.red { background-color: red; }

.orange { background-color: orange; }

.grey { background-color: grey; }

.green { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><navclass="menu green">
  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</nav>
<section id="home">
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="grey"></div>
</section>
<section id="work">
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>
<section id="contact">
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>

javascript html jquery

asked by anonymous 26.08.2017 / 20:47

1 answer

Manipulation of values in input files c .txt OnClick JavaScript not working with "line break"

score 1 · Accepted Answer

You can use the scroll touchmove . Here's an example:

$('.menu li').click(function(){
  $('.menu li').css('background-color', 'green');
  $(this).css('background-color', 'white');
})
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#home").position().top) {
     $('.home').css('background-color', 'white');
     $('.work').css('background-color', 'green');
     $('.contact').css('background-color', 'green');
} 

if ($(document).scrollTop() >= $("#work").position().top) {
    $('.home').css('background-color', 'green');
     $('.work').css('background-color', 'white');
     $('.contact').css('background-color', 'green');
} 

if ($(document).scrollTop() >= $("#contact").position().top) {
    $('.home').css('background-color', 'green');
     $('.work').css('background-color', 'green');
     $('.contact').css('background-color', 'white');
} 
});

* { margin: 0; padding: 0; }

.menu { text-align: center; position: fixed; width: 100%; }

.menu ul { list-style: none; display: inline; }

.menu li { display: inline-block; }

.menu a { text-decoration: none; color: #000; padding: 10px; display: inline-block; }

div { height: 300px; }

.blue { background-color: blue; }

.red { background-color: red; }

.orange { background-color: orange; }

.grey { background-color: grey; }

.green { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navclass="menu green">
  <ul>
    <li><a class="home" href="#home">HOME</a></li>
    <li><a  class="work" href="#work">WORK</a></li>
    <li><a  class="contact" href="#contact">CONTACT</a></li>
  </ul>
</nav>
<section id="home">
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="grey"></div>
</section>
<section id="work">
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>
<section id="contact">
  <div class="grey"></div>
  <div class="orange"></div>
  <div class="blue"></div>
  <div class="blue"></div>
  <div class="orange"></div>
  <div class="grey"></div>
</section>