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

我开始在我的网站上修改标题，并且很难让它按照我的想法工作。如何在向下滚动时更改标题背景？

我想，标题背景更改背景颜色为白色，当向下滚动100-150px，究竟喜欢的是这个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); 
} 
}});

我插入自定义JS插件在my WP site。

也有这个JS：

<script> 
$(window).on("scroll", function() { 
if ($(this).scrollTop() > 100) { 
    $("header").css("background","#252525"); 
} 
else { 
    $("header").css("background","#fff"); 
} 
}); 
</script>

也许是这更好sollution，那么前面的代码？

如何使用JS来做出演示网站我在这个职位之前发布的效果？

来源

2016-12-14 Dora

使用下面的代码片段，在演示网站

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

来源

2016-12-14 18:00:20

非常感谢，完美答案:) – Dora

嗨，还有一个问题.. 如何在向下滚动时使徽标和菜单文字颜色翻转？我认为必须在您发布的JS中添加一些CSS，但不知道是什么。我已将此CSS插入其他站点： -webkit-filter：invert（.8）; filter：invert（.8）; 并做了这件事情，但如何插入到JS之前发布？ – Dora

-1

您提到的站点使用bootstrap框架。您可以通过右键单击该网站并查看检查元素来查看该网站上所做的操作。下面的代码是为navbar找到的：这种方式你不需要编写自定义的js，只要按照行业的最佳做法。

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

来源

2016-12-14 18:00:04

做工精细试试这个代码。

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

来源

2016-12-14 18:08:00 vel

这仅仅是由WordPress做网站：

创建你的主题子主题。
激活您的孩子主题。
您的header.php文件复制到子主题文件夹通过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文件或安装简单自定义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这种方式，把代码主题 - > style.css文件，你将失去，当你在将来更新你的主题，你所做的所有更改。

来源

2016-12-14 18:13:47

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

回答

相关问题