我开始修改我网站上的标题，并且很难让它按照我想要的方式工作。
我想要，标题背景将背景颜色更改为白色，向下滚动100-150像素，与此site完全一样。
我找到了这个JS：
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
我在my WP site中插入自定义JS插件。
还有这个JS：
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
这可能是更好的解决方案，然后是之前的代码吗？
如何使用此JS在我发布的演示网站上发布效果？
答案 0 :(得分：0)
您引用的网站使用bootstrap框架。 您可以通过右键单击该站点并查看inspect元素来查看该站点上的操作。以下代码是针对导航栏找到的：这样您就不需要编写自定义js，jut遵循行业最佳实践。
<nav class="navbar navbar-dark navbar-fixed-top top-nav-collapse" role="navigation">
<div class="navbar-container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<span class="logo hidden-xs">
<img src="img/logo-santa.svg" alt="">
</span>
<span class="logo hidden-sm hidden-md hidden-lg">
<img src="img/logo-notext.svg" alt="">
</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden active">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="/pricing">Pricing</a>
</li>
<li class="page-scroll">
<a href="http://xenopanel.anvilnode.com">XenoPanel</a>
</li>
<li class="page-scroll">
<a href="//multicraft.anvilnode.com">Multicraft</a>
</li>
<li class="page-scroll navbar-borderbtnn">
<a href="//www.anvilnode.com/client">Client Area <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
答案 1 :(得分：0)
使用以下代码段，在演示网站中正常运行
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"red"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});
答案 2 :(得分：0)
试试这段代码。
$(function() {
var bgcolor_navigation = function(){
var bg_offset_top = $(window).scrollTop(); // our current vertical position from the top
if ((100 > bg_offset_top) &&(150 < bg_offset_top)) {
$('#navigation').addClass("bgcolorheadnav");
} else {
$('#navigation').removeClass("bgcolorheadnav");
}
};
// run our function on load
bgcolor_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
bgcolor_navigation();
});
});
<强> CSS
.bgcolorheadnav{
background-color:#000;
}
答案 3 :(得分：0)
这仅适用于WordPress制作的网站：
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('.header-main').addClass('scrolled');
}
else {
$('.header-main').removeClass('scrolled');
}
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
.header-main {
transition:top 0.5s ease;
box-shadow:0 0 10px black;
transition: background-color 0.5s ease;
}
.scrolled {
background: #bada55!important;
}
如果您不以这种方式执行CSS并将代码放入主题 - ＆gt; style.css，您将放弃在将来更新主题时所做的所有更改。