Javascript代碼不起作用

我試圖將.nav的顏色更改爲.past-main中使用的css，當我滾動#main時，但由於某種原因，當我在瀏覽器中打開文件時，javascript不起作用。沒有語法錯誤或任何跡象表明我的代碼有問題。所以我不知道還有什麼要做。這裏是我的代碼：Javascript代碼不起作用

HTML：

<head> 
    <meta charset="utf-8"> 

    <title>Untitled Document</title> 
    <link rel="stylesheet" href="mooss.css"> 

</head> 

<body> 
    <nav class="nav"> 
     <a href="#" class="logo">[logo]</a> 
    </nav> 
    <div id="main">#main</div> 
    <div id="below-main">#below-main</div> 

    <script> 
     // get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable 

     $(document).ready(function() { 

      var mainbottom = $('#main').offset().top + $('#main').height(); 

      // on scroll, 
      $(window).on('scroll', function() { 

       // we round here to reduce a little workload 
       stop = Math.round($(window).scrollTop()); 

       if (stop > mainbottom) { 
        $('.nav').addClass('past-main'); 
       } else { 
        $('.nav').removeClass('past-main'); 
       } 

      }); 

     }) 
    </script> 

</body>

這裏是CSS：

.nav { 
    background-color: transparent; 
    color: #fff; 
    transition: all 0.25s ease; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: #ccc; 
    padding: 1em 0; 
     /* make sure to add vendor prefixes here */; 
} 

.nav.past-main { 
    background-color: #fff; 
    color: #444; 
} 

#main { 
    height: 500px; 
    background-color: red; 
} 

#below-main { 
    height: 1000px; 
    background-color: #eee; 
}

來源

2015-06-19 Alex Dada

添加'console.log（stop +'：'+ mainbottom）;'在您定義停止後，然後查看控制檯以查看數字正在執行的操作。也許不會做你的想法。 – Leeish

你的代碼適合我。這是我創建的一個小提琴：http://jsfiddle.net/vunhpaoh/你只是想標誌標題變成白色，因爲他們滾動通過主要部分，正確？ –

是的，這是我想要的 –

一切都很好。你應該像這樣添加jquery.min.js，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

這是唯一缺少你的回覆我的評論。

來源

2015-06-19 18:08:54

嘗試取出class="nav"並通過nav訪問它，而不是.nav

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable 
 

 
$(document).ready(function() { 
 

 
    var mainbottom = $('#main').offset().top + $('#main').height(); 
 

 
// on scroll, 
 
$(window).on('scroll',function(){ 
 

 
    // we round here to reduce a little workload 
 
    stop = Math.round($(window).scrollTop()); 
 

 
if (stop > mainbottom) { 
 
     $('nav').addClass('past-main'); 
 
    } else { 
 
     $('nav').removeClass('past-main'); 
 
    } 
 

 
}); 
 

 
})

nav { 
 
background-color:transparent; 
 
color:#fff; 
 
transition: all 0.25s ease; 
 
position:fixed; 
 
top:0; 
 
width:100%; 
 
background-color:#ccc; 
 
padding:1em 0; 
 
/* make sure to add vendor prefixes here */ 
 
} 
 

 
    nav.past-main { 
 
    background-color:#fff; 
 
    color:#444; 
 
    } 
 

 
    #main { 
 
    height:500px; 
 
    background-color:red; 
 
    } 
 

 
#below-main { 
 
    height:1000px; 
 
    background-color:#eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<nav> 
 
    <a href="#" class="logo">[logo]</a> 
 
</nav> 
 
<div id="main">#main</div> 
 
<div id="below-main">#below-main</div> 
 

 
</body>

來源

2015-06-19 17:57:25

是啊，非常感謝。這解決了它 –

Javascript代碼不起作用

回答

相關問題