Изменить цвет значка в другом разделе

Question

Я пытался найти решение для изменения цвета иконки для каждой секции, как на этой странице: Элтон Джон .

Но я не могу понять, как это сделать.Решение, которое я нашел здесь, цвет просто меняется, прокручивая сверху раздел:

jQuery(document).ready(function() {

    var project1 = jQuery(".section1").offset();
    var project2 = jQuery(".section2").offset();
    var project3 = jQuery(".section3").offset();
    var $window = jQuery(window);

    $window.scroll(function() {
        if ( $window.scrollTop() >= project1.top ) {
            jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active2").addClass("active");
        }
        if ( $window.scrollTop() >= project2.top ) {
            jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active").addClass("active2");
        }
        if ( $window.scrollTop() >= project3.top ) {
            jQuery("a.fa.fa-facebook, a.fa.fa-twitter").removeClass("active2").addClass("active");
        }
    });         
});

Но мне нравится менять цвета, как на странице Элтона Джона: D

Спасибо за помощь!

Answer 1

Немного сложно, но вот мой подход:

Я использовал FontAwesome 5 (SVG с JS) для иконок.

(function ($) {
    'use strict';

    var project1 = $(".section1").offset();
    var project2 = $(".section2").offset();
    var project3 = $(".section3").offset();
    var socials  = $(".fixed-social a");      

    $(window).scroll(function() {
        /* initial color */
        socials.css('color', 'yellow');

        if ( $(window).scrollTop() >= project1.top ) {
            socials.css('color', 'red');
        }
        if ( $(window).scrollTop() >= project2.top ) {
            socials.css('color', 'green');
        }
        if ( $(window).scrollTop() >= project3.top ) {
            socials.css('color', 'blue');
        }
    });

})(jQuery);

/* General */
section {
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section0 {
   background: #333 
}

.section1 {
    background: #444
}

.section2 {
    background: #555
}

.section3 {
    background: #666
}

h1 {
    font-size: 30px
}

/* Social */
.social-wrapper {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 999;
    width: 100%;
    height: 0px;
}

.fixed-social {
    position: absolute;
    top: 4.4rem;
    right: 4.4rem;
    max-width: 3.2rem;
}

.fixed-social a {
    color: yellow; /* initial color */
    width: 3.2rem;
    height: 3.2rem;
    font-size: 25px;
    display: inline-block;
    text-align: center;
}

<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="social-wrapper">
    <div class="fixed-social">
        <a class="shopping" href=#"><i class="fas fa-shopping-bag"></i></a>
        <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
        <a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a>
        <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>
        <a class="youtube" href="#"><i class="fab fa-youtube"></i></a></a>
    </div>
</div>
<section class="section0"> <h1>section 0 Yellow Icons</h1> </section>
<section class="section1"> <h1>section 1 Red Icons</h1> </section>
<section class="section2"> <h1>section 2 Green Icons</h1> </section>
<section class="section3"> <h1>section 3 Blue Icons</h1> </section>

Answer 2

position: fixed;
transform: translateZ(0px);
backface-visibility: hidden;

хорошо играет роль на этом сайте. Также для каждого раздела у них разные цвета иконки SVG, используемые с одним и тем же CSS.

Я не верю, что это связано со сценарием. CSS3 будет делать.