时间戳

首页 > 解决方案 > 在滚动时更改文本颜色

css - 在滚动时更改文本颜色

问题描述

滚动时，导航栏从透明变为白色背景。透明文本上的文本是白色的，但我想在滚动时将文本更改为黑色以获得对比。问题是 color:black 不起作用？我不知道这是否足以找到解决方案，只需写下您还需要什么的评论。

HTML

<header class="navbar-fixed-top">
  <a href="#" id="logo" class="logo">Example<br>1001</a>
  <nav id="navigation">
      <ul class="nav__links">
        <li><a class="hvr-reveal hjem" href="#">HOME1</a></li>
        <li><a class="hvr-reveal webkamera" href="#">HOME2</a></li>
        <li><a class="hvr-reveal værmelding" href="#">HOME3</a></li>
        <li><a class="hvr-reveal status_nav" href="#">HOME4</a></li>
      </ul>
  </nav>
</header>

CSS 

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 10%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

/* navbar change on scroll */
.navbar-fixed-top.scrolled {
  background-color: red !important;
  transition: background-color 200ms linear;
  z-index: 1;
  color: black;
}

标签： css

解决方案

使用 jQuery，您可以这样做

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $('.hvr-reveal').css('color', '#000');
            } else {
                $('.hvr-reveal').css('color', '#fff');
            }
        });
    });

推荐阅读