How to change header background on scroll down?

Question

I started with modifing the header on my site, and have a hard time to make it worked as i wanted.

I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this site .

I found this 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);
}  
}});

what i inserted into custom JS plugin in my WP site .

Also have this JS:

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

Is maybe this better sollution, then previous code?

How to use this JS to make the effect on demo site i posted before in this post?

Answer 1

The site you referred uses bootstrap framework. You can see what is done on that site by right clicking on the site and say inspect element. The following code was found for the navbar: This way you do not need to write custom js, jut follow the industry the best practice.

<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

use following code snippet, working fine in the demo website

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

Answer 3

Try this code.

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

This is just for websites made by WordPress:

1. Create a child theme for your theme.
2. Activate your child theme.
3. Copy your header.php file to the child theme folder by FTP client
4. Replace the code in the child's header.php with this code:

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

5. Put following code to your Child Theme style.css file or install the Simple Custom CSS plugin and put the code there.

.header-main {
  transition:top 0.5s ease;
  box-shadow:0 0 10px black;
  transition: background-color 0.5s ease;
}

.scrolled {
  background: #bada55!important;
}

If you don't do the CSS this way and put the code to themes -> style.css, you will loose all changes you made when you update your theme in the future.