0

I'm trying to do something simple. I have a nav bar and I want it to change the background color when scrolling. I can't get it to work. Below is my code.

I've got this in my head section of my html.

<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/HeaderScroll.js"></script>

Here is the Javascript. I tried putting a ready function around it, but that didn't work either.

     $(function() {
     $(window).on("scroll", function() {
         if($(window).scrollTop() > 50) {
             $(".navbar").addClass("active");
        } else {
             //remove the background property so it comes transparent again (defined in css)
            $(".navbar").removeClass("active");
       }
    }); });

Here is my CSS.

    /* nav */
.navbar {
    right: 0;
    left: 0;
    margin: 0 auto;
    position: fixed;
    width: 95%;
    background-color: transparent;      
}

.navbar .active {
    background: #000;
}

Here is the head section of my html. I changed the link for jquery to the Google hosted one.

 <!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>

<link href="//www.google-analytics.com" rel="dns-prefetch">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">

<?php wp_head(); ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/HeaderScroll.js"></script>

<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>

</head>
gcummings
  • 1
  • 2

4 Answers4

1

it's because you nested .active in your css. try to combine both class .navbar.active instead.

0

Here is a link to a Pen by Dave Redfern. The Function With Three Selectors:

$(window).scroll(function() {

  var $window = $(window),
  $body = $('body'),
  $panel = $('.panel');

The background color changes when scrolling past divs.

RomanK
  • 155
  • 1
  • 2
  • 13
0

Try this:

$(document).ready(function() {

  $(window).scroll(function () {
  //if you hard code, then use console
   //.log to determine when you want the 
   //nav bar to stick.  
   console.log($(window).scrollTop())
   if ($(window).scrollTop() > 50) {
    $('.navbar').addClass('active');
  }
  if ($(window).scrollTop() < 50) {
     $('.navbar').removeClass('active');
}
});
});
Pushpendra
  • 1,694
  • 14
  • 27
  • I was convinced this would do it, but it didn't. Maybe my html just isn't seeing the js files. – gcummings Jun 06 '16 at 02:44
  • I'd be better if you could post your html code also. also try removing first "/" from "/js/jquery-2.2.4.min.js" in – Pushpendra Jun 06 '16 at 02:45
  • I posted it in the original post just now. I have removed it several times but it doesn't work. – gcummings Jun 06 '16 at 02:52
  • 1
    I used the answer here to see if my jquery is loaded. I got the success response. http://stackoverflow.com/questions/7341865/checking-if-jquery-is-loaded-using-javascript – gcummings Jun 06 '16 at 03:05
0

I've kind of solved the issue. It works, but what I did was move my jquery link to the top of my head and then put the js code in my external file directly beneath. So now I need to see why it isn't seeing my js/HeaderScroll.js file. Thanks!

I'd mark one answer but each of you kind of added a piece of the answer.

gcummings
  • 1
  • 2