I want to change the color of the button border to black on scroll. Currently when user scrolls the header background color switches to white and the text color to black. How can I switch the border of the button switch from white to black?

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

CodePudding user response：

$(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 >
    <div >You are here</div>
    <div >Contact</div>
    <div >About me</div>
  </div>

</header>

You can add a class to your css that apply the border to the buttons, and when the scroll condition is satisfied you can apply this class to the buttons. Remove that class when the scroll is less than 50px