如何使用我的代码无法运行的jquery更改滚动类的背景颜色？

Question

我正在尝试做一些简单的事情。 我有一个导航栏，我希望它在滚动时更改背景颜色。 我无法正常工作。 下面是我的代码。

我已经在我的html的头部中找到了这个。

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

这是Javascript。 我尝试在其周围放置一个现成的功能，但是那也不起作用。

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

这是我的CSS。

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

.navbar .active {
    background: #000;
}

这是我的html的头部。 我将jquery的链接更改为Google托管的链接。

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

Answer 1

这是因为您将.active嵌套在CSS中。 尝试合并两个类.navbar.active 。

Answer 2

这是Dave Redfern的笔的链接。 具有三个选择器的功能：

$(window).scroll(function() {

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

滚动div时，背景颜色会更改。

Answer 3

尝试这个：

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

Answer 4

我已经解决了这个问题。 它可以工作，但是我所做的是将我的jquery链接移到我的头顶，然后将js代码直接放在外部文件的下面。 所以现在我需要看看为什么看不到我的js / HeaderScroll.js文件。 谢谢！

我会标出一个答案，但你们每个人都添加了一个答案。

如何使用我的代码无法运行的jquery更改滚动类的背景颜色？

问题描述

4 个解决方案

解决方案1
1

解决方案2
0 2016-06-06 02:31:56

解决方案3
0 2016-06-06 02:38:38

解决方案4
0 2016-06-06 03:18:52

如何使用我的代码无法运行的jquery更改滚动类的背景颜色？

问题描述

4 个解决方案

解决方案1 1

解决方案2 0 2016-06-06 02:31:56

解决方案3 0 2016-06-06 02:38:38

解决方案4 0 2016-06-06 03:18:52

解决方案1
1

解决方案2
0 2016-06-06 02:31:56

解决方案3
0 2016-06-06 02:38:38

解决方案4
0 2016-06-06 03:18:52