Question

我开始修改我网站上的标题，并且很难让它按照我想要的方式工作。

我想要，标题背景将背景颜色更改为白色，向下滚动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在我发布的演示网站上发布效果？

Answer 1

您引用的网站使用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>

Answer 2

使用以下代码段，在演示网站中正常运行

jQuery(document).scroll(function(){
    if(jQuery(this).scrollTop() > 300)
    {   
       jQuery('#navigation').css({"background":"red"});
    } else {
       jQuery('#navigation').css({"background":"transparent"});
    }
});

Answer 3

试试这段代码。

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

Answer 4

这仅适用于WordPress制作的网站：

为您的主题创建子主题。
激活您的孩子主题。
通过FTP客户端
使用以下代码替换子项header.php中的代码：

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

将以下代码放入您的Child Theme style.css文件或安装 Simple Custom CSS 插件并将代码放在那里。

.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，您将放弃在将来更新主题时所做的所有更改。

如何在向下滚动时更改标题背景？

4 个答案: