Question

我尝试了很多次，但有些事情没有用。向下滚动时，#custom-nav背景变为黑色，不透明度较低。我不知道我错过了什么，或者问题是什么，任何人都可以帮助我吗？

的style.css

＆＃13;

/*
--------------
--------NAVBAR
--------------
*/
#custom-nav {
	background-color:transparent;
	border: 0;
	box-shadow: none;
	z-index: 9999999;
	width:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: background .5s ease-in-out, opacity .5s ease;
	-moz-transition: background .5s ease-in-out, opacity .5s ease;
	transition: background .5s ease-in-out, opacity .5s ease;



}
.bchange {
	background-color:black;
	opacity:0.9;
}
#custom-nav h1 {
	float:left;
	margin-top:-1%;
	margin-left:2%;
}

#custom-nav h1 a {
	color: #fff;
	font-size: 0.2em;
	text-decoration: none;
	transition: all 0.2s linear;
	font-family: 'Lato';
	font-style: ultra-bold;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 7px;
	
}
#custom-nav h1 a:hover{
	text-decoration: none;	
	color:#FFF;
}


#custom-nav ul   {
	margin:0;
	margin-top:1.5%;
	margin-left:50%;
}

#custom-nav li    {
	padding: 0 0 0 0px;
	list-style: none;
	display: inline;
	background: transparent;
	text-align: center;
	float:left;
	position:relative;

}
#custom-nav li:after {
	content: "";
}

#custom-nav li a  {
	float: left;
	font-size: 0.9em;
	font-weight: 100;
	font-style: normal;
	line-height: 26px;
	font-family: Oswald;
	text-transform:uppercase;
	letter-spacing:2px;

  padding: 6px 20px 0 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}
#custom-nav li ul {
	list-style-type: circle;
}
#custom-nav li ul li a
{ background: transparent;
 font-size: 0.8em;
	font-weight: 100;
	font-style: normal;
	line-height: 26px;
	font-family: Oswald;
	text-transform:uppercase; }
  
#custom-nav >li:hover > a
{ color: #1D1D1D;
 
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);

  text-shadow: none;
  left: 0;}

#custom-nav li ul li
{ background: transparent;
  width: 100%;}

#custom-nav li:hover ul 
{ display: block;
  overflow: hidden;
}

#custom-nav li ul 
{ position: absolute;
  z-index: 1;
  top:100%;
  left: 0;
  height: auto;
  width: 250px;
  padding-bottom: 15px;
  display:none;
  margin:0px;
}

＆＃13;

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes();?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes();?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes();?>> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" <?php language_attributes();?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes();?>> <!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon() ) { ?>
	<?php if(of_get_option('favicon') != ''){ ?>
	<link rel="icon" href="<?php echo of_get_option('favicon', "" ); ?>" type="image/x-icon" />
	<?php } } ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'atom_url' ); ?>" />
	<!-- Javascript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	<script type='text/javascript'>
	(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('#custom-nav');

    if (scrollPos > 20) {
      navbar.addClass('bchange');
    } else {
      navbar.removeClass('bchange');
    }
  });
});
</script>
<?php
	if(
		of_get_option('custom_font_family_name') &&
		of_get_option('custom_font_woff') &&
		of_get_option('custom_font_ttf') &&
		of_get_option('custom_font_svg') &&
		of_get_option('custom_font_eot')
	):
	?>
		<style type="text/css">
	
	@font-face {
    font-family: '<?php echo of_get_option("custom_font_family_name");?>';
    src: url('<?php echo of_get_option("custom_font_eot");?>');
    src: url('<?php echo of_get_option("custom_font_eot");?>?#iefix') format('embedded-opentype'),
         url('<?php echo of_get_option("custom_font_woff");?>') format('woff'),
         url('<?php echo of_get_option("custom_font_ttf");?>') format('truetype'),
         url('<?php echo of_get_option("custom_font_svg");?>#<?php echo of_get_option("custom_font_family_name");?>') format('svg');
    font-weight: normal;
    font-style: normal;

}
	</style>
	<?php endif; ?>
<?php		
wp_head();
?>	
<!--[if IE 8 ]>
<link rel="stylesheet" id="stylesheet-ie8" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/ie8.css" />
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/respond.js"></script>
<![endif]-->


</head>
<body <?php body_class(); ?>>

<div id="custom-nav" class="navbar navbar-default navbar-fixed-top">


	<h1><a href="<?php echo get_settings('home'); ?>">Independent Genteleman</a></h1>



	    <?php wp_nav_menu(array('theme_location' => 'footer',)); ?>



</div>

</header>

＆＃13;

Answer 1

<script type='text/javascript'>
jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('#custom-nav');

    if (scrollPos > 20) {
      navbar.addClass('bchange');
    } else {
      navbar.removeClass('bchange');
    }
  });
});
</script>

如果您不希望效果仅删除此代码，则代码的这部分会导致导航栏更改颜色。

它的作用是：检查当前滚动位置并为菜单添加类.bchange＃custom-nav

滚动时WordPress导航栏背景更改

1 个答案: