Javascript 当用户向下滚动时，如何更改徽标并在固定标题的底部添加彩色边框？

网上有很多关于scroll上标题效果的信息，我花了很多时间试图自己解决这个问题。我希望找到一种不使用JS的方法，但似乎没有办法。我试着用JS添加一个简单的效果（改变卷轴上标题的高度）。。。我希望一旦我得到了头球，我可以用它来做出我想要的效果。但我甚至不能让头球回应。最终，我希望页眉高度稍微降低，徽标将更改为不同的图像，底部将添加15px的彩色边框。我知道这对于一个新手网页设计师来说是一个很大的尝试，但我真的很想知道如何去做。任何关于这方面的在线资源的帮助或指导都将不胜感激

我只添加我的html和css只是为了让事情不那么混乱。如果需要，我可以在js文件中添加我尝试过的内容。我评论了一些与js一起使用的css，它们显然不起作用。提前感谢您抽出时间

 <header>
        <div id="nav">
            <div id="nav_left">
                <a href="index.html">HOME</a>
                <a href="services.html">SERVICES</a>
                <a href="portfolio.html">PORTFOLIO</a>
            </div>
            <a href="index.html" id="logo" class="noHover"><img src="images/logo_6_small.png" alt="Claire Crawford"
                    id="logo_Claire" /></a>
            <div id="nav_right">
                <a href="blog.html">BLOG</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">GET IN TOUCH</a>
            </div>
        </div>
    </header>

---

尝试在实际代码中使用此代码。这可能很管用

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
$（'#logo img'）.attr（'src'，'http://placehold.it/220?text=Original+标志！）；
$（“#nav”）.css（“边框底部”、“无”）；
}
if（$（this）.scrollTop（）<200）{
$（'#logo img'）.attr（'src'，'https://cdn-images-1.medium.com/max/1600/1*4mdh6im57oFHSNY4syD_2Q.png'）；
$（“#nav”）.css（“边框底部”，“2倍纯红”）；
}
})
});
标题{
高度：160px；
位置：固定；
排名：0；
宽度：100%；
背景：白色；
/*边框底部：15px实心rgb（19717955）*/
}
.包装纸{
高度：1000px；
}
img{
宽度：100px；
}
#导航{
宽度：100%；
显示器：flex；
高度：110px；
}

谢谢。原谅我，我对JS知之甚少。所以我需要编辑您的代码，并添加我的原始标志img和一个我想显示在滚动。。。例如：。。“$（'#logo img'）.attr（'src'，images/claire#u logo.png'）；”然后$（“#logo img'）.attr（'src'，'images/claire#u new_logo.png'）；但是，我还需要替换什么来实现这一点呢？如果您需要添加border add$（“#nav”）.css（“border-bottom”，“2px-solid-red”）；这条线，并根据需要更改颜色。此外，请接受答案作为已接受的答案：）还有一件事，如果您没有在项目中使用jqury，请将其添加到index.html文件中，并将我的代码复制粘贴到您的html编码下面。您可以阅读上面我的第一条评论。我不确定如何编辑您的代码以使其正常工作。你的意思是我不需要将你的代码添加到一个单独的JS文件中，我可以简单地将它包含在我的html文件中吗？或者将它包含在你的JS文件中，或者使用code here标记将它包含在你的html代码下面。我想你现在清楚了
header {
  height: 160px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  /* border-bottom: 15px solid rgb(197, 179, 55) */
}

/* header border on scroll
header.fixed.scrolled .header_bottom .container_inner {
  border-bottom: 1px solid #0a0a0a;
} */

/* header.sticky {
  height: 120px;
} */

/* header {
  transition: padding 300ms ease;
} */