How can I change the background color of a class on scroll using jquery my code isn't working?
Question
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>
4 answers
solution1
1
it's because you nested .active in your css. try to combine both class .navbar.active instead.
solution2
0 2016-06-06 02:31:56
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.
solution3
0 2016-06-06 02:38:38
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');
}
});
});
solution4
0 2016-06-06 03:18:52
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.