更改不同部分的图标颜色

Question

我试图为每个部分的图标颜色更改找到解决方案，例如此页面：Elton John。

但我不知道该怎么做。我在这里找到了一个解决方案，颜色只是通过滚动到顶部来改变：

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");
        }
    });         
});

但我喜欢像 Elton John's Page 那样改变颜色：D

感谢您的帮助！

Answer 1

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

在该站点中发挥了很好的作用。此外，对于每个部分，它们都有不同颜色的 svg 图标与相同的 css 一起使用。

我相信与脚本无关。 css3 可以。

Answer 2

这有点棘手，但这是我的方法：

我使用FontAwesome 5（带有 JS 的 SVG）作为图标。

(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>