基于滚动位置的导航填充转换

Question

我正在尝试根据jQuery中指示的滚动位置使“insticon”svg交换填充颜色为黑/白。我在if＆amp; amp;中指出了这些变化。然而，“insticon”不同于“header-bg”＆amp; “header-content”没有过渡。我如何实现这种效果？

jQuery(document).ready(function($) {
    var lastScrollTop = 0;
    $(window).scrollTop(0);

    $(window).on('scroll', function() {
        var header = $('header');
        var content = $('content');
        var headerBg = $('.header-bg');
        var headerCnt = $('.header-content');
		var inst = $('.navinstagram');
        var scrollTop = $(window).scrollTop();
        var dynHeaderVisible = false;

        if (lastScrollTop > scrollTop) {
            if (scrollTop <= 400) {
                headerBg.css("height", 0);
                headerCnt.css('color', 'white');
				inst.css('fill', 'white');
            } else {
                headerBg.css("height", 50);
                headerCnt.css("height", 50);
                headerCnt.css('color', 'black');
				inst.css('fill', 'black');
            }
        } else {
            // Down
            if (scrollTop > 350) {
                console.log("hi");
                headerCnt.css("height", 0);
                headerBg.css("height", 0);
				
            }
        }

        lastScrollTop = scrollTop;
    });

    $.fn.isOnScreen = function() {
        var element = this.get(0);
        var bounds = element.getBoundingClientRect();
        return bounds.top < window.innerHeight && bounds.bottom > 0;
    }
});

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 1em;
    font-family: Helvetica Neue, Helvetica,Arial,Sans-serif;
}
a {
    background: transparent;
    border: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: .3s color;
    transition: .3s height;
}
header {
    position: fixed;
    height: 50px;
    width: 100%;
}
.header-wrapper {
    width: 100%;
    height: 100%;
    background: transparent;
}
.header-bg,
.header-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.header-bg {
    color: gray;
    background: white;
    border-bottom: 1px solid black;
    transition: .3s height;
    height: 0;
}
.header-content {
    transition: .3s color;
    color: white;
    background: transparent;
    height: 50px;
    transition: .3s height;
    overflow: hidden;
    list-style: none;
}
ul {
        width:100%;
}
li {
	padding-top: 15px;
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        margin-right:50px;
}
.navBarLinks {
    color: inherit;
    cursor: pointer;
    font-size: .8em;
    letter-spacing: 0.05em;
    transition: .3s color;
	padding-top: 15px;
    line-height: 31px;
}

.instagram{
	float:left;
	padding-left:50px;
	}
.hamburger {
	float:right;
	padding-right:50px;
	}
	.insticon {
    float:right;
    width: 25px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
	fill: white;
    font-size:.8em;
    letter-spacing:0.05em;
	padding: .05px 10px;
	}
	
	
	@media only screen and (max-width : 555px) {
		.find{
			display: none;
			}
	}
content {
    height: 2000px;
    background: orange;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background: white;
    border-bottom: 1px solid black;
    font-size: 48px;
    height: 200px;
    width: 100%;
}
.stage-0 {
    background: grey;
    height: 400px;
}

<script src=	"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li class="instagram"> 
        <a href="" class="navBarLinks find">Find me on</a>
        <a href="" class="navBarLinks in">
        <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-227 325 155.2 144" style="enable-background:new -227 325 155.2 144;" xml:space="preserve">
<path style="" d="M-184.3,447.7h-21.4V379h21.4C-184.3,379-184.3,447.7-184.3,447.7z M-195,369.6
	c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4c6.8,0,12.4,5.5,12.4,12.4C-182.6,364-188.1,369.6-195,369.6z M-104.3,447.7
	h-21.3v-33.4c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6v34h-21.4V379h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1
	c21.6,0,25.6,14.2,25.6,32.7C-104.3,410-104.3,447.7-104.3,447.7z"/>
<g>
	<path style="" d="M-75.1,445c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H-77v4h0.6V445h0.7l0,0l1.1,1.7h0.6L-75.1,445
		L-75.1,445z M-75.7,444.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C-74.6,444.5-75.1,444.6-75.7,444.6z"/>
	<path style="" d="M-75.7,441c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8s3.8-1.7,3.8-3.8
		C-71.8,442.6-73.5,441-75.7,441z M-75.7,448.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
		C-72.4,446.7-73.8,448.1-75.7,448.1z"/>
</g>
</svg>
</a>
</li>
        <li class="home"><a href="" class="navBarLinks">Logo </a></li>
        <li class="hamburger"><a href="" class="navBarLinks">Hamburger</a></li>
      </ul>
    </div>
  </div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

Answer 1

你的问题在这里：

var inst = $('.navinstagram');

没有“navinstagram”。我想你的意思是：

var inst = $('.insticon');