Question

我尝试在粘性导航栏中更改字体颜色。向下滚动时，我想将导航背景红色的颜色更改为另一种颜色和字体颜色，从白色到黑色。我试图更改字体颜色，但无法更改。

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

Answer 1

这里你去（当滚动超过210px时，这会将导航背景颜色更改为蓝色，将字体颜色更改为黑色，如果再次返回，则会将背景颜色恢复为红色，将字体颜色恢复为白色）。如果我使用jQuery工具：

$(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');
                }
            });
        });

您可以参考以下链接： jquery change background color user scroll

Answer 2

使用JS检测滚动事件可以实现解决方案。有关jQuery实现，请参阅以下示例。

我建议使用JS在header元素中添加和删除类，而不是应用内联样式。这样可以确保您的样式可以在CSS中保存在一起，并且在将来更改样式时可以使生活更轻松。

<强> 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');
    }
});

建议在滚动处理程序上使用某种限制来减少代码触发的次数。可以找到关于限制的帖子here。

Answer 3

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

使用以下Jquery代码更改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>

Answer 4

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');
    }
})

滚动时如何更改粘性导航栏中的字体颜色？

4 个答案: