在滚动时更改按钮边框颜色

Question

我想在滚动时将按钮边框的颜色更改为黑色。 当前，当用户滚动 header 时，背景颜色切换为白色，文本颜色切换为黑色。 如何将按钮开关的边框从白色切换到黑色？

参见示例：Jsfiddle

 $(function() { $(window).on("scroll", function() { if ($(window).scrollTop() > 50) { $("header").addClass("sticky"); } else { //remove the background property so it comes transparent again (defined in your CSS) $("header").removeClass("sticky"); } }); }); $('.header-button').on('click', function() { $(this).toggleClass("active"); });

Answer 1

 $(function() { $(window).on("scroll", function() { if ($(window).scrollTop() > 50) { $("header").addClass("sticky"); $(".buttons div.header-button").addClass("changeHeaderButtom"); } else { //remove the background property so it comes transparent again (defined in your CSS) $("header").removeClass("sticky"); $(".buttons div.header-button").removeClass("changeHeaderButtom") } }); }); $('.header-button').on('click', function() { $(this).toggleClass("active"); });

 body { background-color: lightcoral; height: 200vw; } header { display: flex; position: fixed; align-items: center; top: 0; right: 0; left: 0; height: 70px; transition: all 0.5s; color: white; }.buttons { display: flex; justify-content: space-between; flex: 1; margin: 0 100px 0 100px; }.button { font-family: Arial, Helvetica, sans-serif; font-weight: 700; cursor: pointer; }.header-button { padding: 5px 10px; border: 1px solid transparent; }.header-button:hover { border: 1px solid white; cursor: pointer; border-radius: 4px; }.header-button.changeHeaderButtom,.header-button.changeHeaderButtom:hover{ border:1px solid black; }.sticky { background-color: white; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10); color: black; }.active { border: 1px solid white; cursor: pointer; border-radius: 4px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div class="buttons"> <div class="button header-button active">You are here</div> <div class="button header-button">Contact</div> <div class="button header-button">About me</div> </div> </header>

您可以将 class 添加到 css 中，将边框应用于按钮，当满足滚动条件时，您可以将此 class 应用于按钮。 当滚动小于50px时删除class