如何使用我的代碼無法運行的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