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）作为图标。

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

更改不同部分的图标颜色

2 个答案: