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

Question

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>

I think you should do this in javascript. Because the HTML structure, and the CSS style of the page. Both have no function that detects the scroll. If so, answer me I post a reply with the code. — James, Feb 26 '16 at 03:03

score 1 · Answer 1 · edited May 23 '17 at 12:31

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

score 0 · Answer 2 · edited May 23 '17 at 11:50

A solution can be achieved using JS to detect a scroll event. See the below example for a jQuery implementation.

I recommend using JS to add and remove a class to the header element instead of applying inline styles. This ensures your styles can be kept together in the CSS and will make life easier when changing styles in the future.

CSS

header.compact nav {
    background-color:#7E7E7E;
}

JS

var header = $('header'),
    minScroll = 50; // min distance to scroll before compacting header

// Listen to scroll event
$(window).scroll(function () {

    var scrollTop = $(this).scrollTop();

    if (scrollTop > minScroll) {
        header.addClass('compact');
    }
    else {
        header.removeClass('compact');
    }
});

It is recommended to use some sort of throttling on the scroll handler to reduce the amount of times the code fires. A post on throttling can be found here.

score 0 · Answer 3 · answered Feb 26 '16 at 04:18

Include the following Jquery link to your document:
<script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>

And use the following Jquery Code to change the background color of Nav:

<script>
$(document).ready(function(){ 
var scroll_pos = 0;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_end_pos = 1000; //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
$(document).scroll(function() {
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
       // console.log( 'scrolling and animating' );
        //we want to calculate the relevant transitional rgb value
        var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
        var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
        var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
        var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
        var newColor = new $.Color( newRed, newGreen, newBlue );
        //console.log( newColor.red(), newColor.green(), newColor.blue() );
        $('header').animate({ backgroundColor: newColor }, 0);
    } else if ( scroll_pos > animation_end_pos ) {
         $('header').animate({ backgroundColor: ending_color }, 0);
    } else if ( scroll_pos < animation_begin_pos ) {
         $('header').animate({ backgroundColor: beginning_color }, 0);
    } else { }
  });
 });
 </script>

score 0 · Answer 4 · edited Sep 11 '20 at 22:14

0

CSS:

header.scrolledHeader ul li a {
    color: ######  //color you want
}

JS:

$(window).scroll( function(e) {
    var scroll = $(this).scrollTop();  // getting the current position of Scroll
    if( scroll > 20 ) {
        $('header').addClass('scrolledHeader');
    } else {
        $('header').removeClass('scrollHeader');
    }
})

edited Sep 11 '20 at 22:14

Adrian Mole

49,934
160
51
83

answered Sep 11 '20 at 09:25

Mozin Omer

11
3

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

4 Answers4