Question

我的导航栏标题为LOGO ABCD，我尝试通过添加和删除类向下滚动更改颜色时进行设置，但不知道为什么不起作用

徽标ABCD

A

B

C

D

nav.navbar {
  transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
  background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
  color         : white;
}

nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
  color     : yellow;
}

$(window).scroll(function(evt){
  if ($(window).scrollTop()>0)
    $(".navbar").removeClass("navbar-top");
  else
    $(".navbar").addClass("navbar-top");
});

.PJ_title{color:grey;}
.PJ_color{color:red;}

$(window).scroll(function(evt){
  if ($(window).scrollTop()>300)
    $(".PJ_title").removeClass("PJ_color");
  else
    $(".PJ_title").addClass("PJ_color");
});

Answer 1

我测试过，并且“测试标题”已成功更改颜色。

您可以运行下面的代码片段并向下滚动以查看更改颜色。有什么问题吗？

$(window).scroll(function(evt){
  if ($(window).scrollTop()>0)
    $(".navbar").removeClass("navbar-top");
  else
    $(".navbar").addClass("navbar-top");
});
$(window).scroll(function(evt){
  if ($(window).scrollTop()>300)
    $(".PJ_title").removeClass("PJ_color");
  else
    $(".PJ_title").addClass("PJ_color");
});

nav.navbar {
  transition: 0.5s;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top {
  background-color: Black;
}
nav.navbar.navbar-default.navbar-fixed-top.navbar-top a {
  color         : white;
}

nav.navbar.navbar-default.navbar-fixed-top.navbar-top a:hover {
  color     : yellow;
}
.PJ_title{color:grey;}
.PJ_color{color:red;}

.PJ_title{ position: fixed; }

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style='height: 1000px'>
<nav class='navbar navbar-default navbar-fixed-top navbar-top'>
  <a>Test</a>
</nav>
<h1 class='PJ_title'>Test Title</h1>
</body>
</html>

Answer 2

这是您可以执行的操作。在滚动功能中，使用this.scrollY。根据值，根据需要添加或删除类。

$(document).ready(function() {
  $(window).scroll(function(evt) {
    var scrollPos = this.scrollY;
    if (scrollPos > 200) {
      $(".navbar").removeClass("navbar-green");
      $(".navbar").addClass("navbar-blue");
    } else {
      $(".navbar").addClass("navbar-green");
      $(".navbar").removeClass("navbar-blue");
    }
  });
});

nav.navbar {
  background-color: #ccc;
  transition: all 0.5s ease-out;
}

nav.navbar-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.extra-long {
  height: 200vw;
}

nav.navbar-green {
  background-color: green;
}

nav.navbar-blue {
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="extra-long">
  <nav class="navbar navbar-fixed-top">
    <p>LOGO ABCD</p>
    <p>A</p>
  </nav>
</div>

Answer 3

这是您可以清除的代码版本。您必须根据需要更改颜色：

const w = $(window); 
const header = $('#main-header'); 
w.on('scroll', function() { 
  if(w.scrollTop() > 0) { 
    header.addClass('header-secondary'); 
  } else { 
    header.removeClass('header-secondary'); 
  }
});

html {
  height: 100%;
}
body {
  margin: 0;
  font-family: sans-serif;
  height: 100%;
}
header {
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #ccc;
  height: 50px;
  transition: background-color ease .3s; 
}
header nav {
  margin-left: auto;
  padding-right: 15px;
}
header nav a {
  text-decoration: none;
}
#logo {
  font-weight: 700;
  padding-left: 15px;
}
.header-secondary {
  background-color: darkblue;
  color: #fff;
}
.header-secondary nav a {
  color: #fff;
}
main {
  padding: 65px 15px 0;
  background-color: salmon;
  height: 200%;
}
main p {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header">
  <p id="logo">LOGO ABCD</p>
  <nav>
    <a href="">item</a>
    <a href="">item</a>
    <a href="">item</a>
  </nav>
</header>
<main>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis adipisci totam odit natus voluptates ducimus impedit provident eum quia asperiores vitae neque ullam deserunt enim dolore minima, cum, perferendis et laborum. Magni, odit. Ducimus reiciendis illo assumenda dignissimos? Quidem eligendi molestiae atque mollitia, exercitationem officia. Debitis incidunt voluptas explicabo aliquam.</p>
</main>

向下滚动更改文本颜色不起作用？

3 个答案: