How to change font color in sticky nav bar when scrolling down?

html css fonts colors navbar

12,418

Here you go (this will change nav background color to blue and font color to black when you scroll more than 210px, and will revert background color back to red and font color to white if you go back up). In case, i use jQuery implement:

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("nav").css('background-color', 'blue');
                    $("nav a").css('color', 'black');
                } else {
                    $("nav").css('background-color', 'red');
                    $("nav a").css('color', 'white');
                }
            });
        });

You can refer more follow the link: jquery change background color user scroll

12,418

Author by

Admin

Updated on June 05, 2022

Comments

Admin almost 2 years

I tried to change font color in sticky nav bar. When scrolling down, I want to change color of nav background red to another color and font color from white to black. I tried to change font color but it can't be changed.

body{
	font-size:16px;
	color:#FFFFFF;
	}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #D02F32;
    clear: both;
    width: 100%;
    min-height: 87px;
	}

    /* ==========================================================================
Navigation Style
========================================================================== */
nav{
	/*background-color:#7E7E7E;*/
	padding:2px;
	width:800px;
	margin:0 auto;
	float:right;
	margin-top:1%;}
nav ul{
	list-style-type:none;
	text-align:center;
	font-size: 1em;}
nav li{
	display:inline;
	padding:6px;}
nav a:hover{ 
	color:#82ED8E;}
nav a{ 	
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bold;}

<body>
    	<header class="sticky">
        <div class="wrapper">
          <nav class="menu-top-container">
           <ul id="top-nav" class="menu">
             <li><a href="index.html">Steps</a></li>
             <li><a href="index.html">questions</a></li>
             <li><a href="index.html">answers</a></li>
           </ul>
          </nav>
         </div>
    </header>
</body>