Question

我试图在我的网页上粘贴横幅，但我遇到了一些问题。我想我知道问题是什么，但我不知道如何解决它。

这是粘性横幅的JQuery编码：

$(window).scroll(function() {
if( $(this).scrollTop() > 175 ) {
    nav ul.addClass("main-nav-scrolled");
}   
else { 
    nav ul.removeClass("main-nav-scrolled");
}
});

这是导航菜单使用的CSS编码：

  .nav ul {
  list-style: none;
  background-color: #10bbb6;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 30px;
  height: 30px;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #088783;
}

.nav a.active {
  background-color: #fff;
  color: #088783;
  cursor: default;
  font-weight: bold;
}

  .nav li {
    width: 110px;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    font-size: 1.2em;
  }

  .nav li {
    display: inline-block;
    margin-right: -4px;
  }

我对JQuery概念完全陌生，而且我做了很多研究，但没有什么可以解决我的问题。我认为在je Jquery编码＆＃34; nav ul＆＃34;不被承认。

nav ul.addClass("main-nav-scrolled");

我也试过

nav.addClass("main-nav-scrolled");

但那也不起作用。

其他重要的CSS标签是：

 .main-nav-scrolled {position: fixed;
    top:0;}
    #top { position: fixed;
    top:0;
    z-index: -1;
    width: 100%
    }

#bottom {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #10bbb6;  
    overflow: scroll;
}

#bottom,
#top { position: relative; }

这就是它放在身体里的方式：

    <body class="news">

<div id="top">
<a href="Homepage.html"><IMG STYLE="position:absolute; TOP:10px; LEFT:125px; WIDTH:150px; HEIGHT:150px" SRC="afbeeldingen/kledingbank2.jpg"></a> 

<div class="banner"> Kledingbank Zaltbommel, voor iedereen. </div>
</div>

  <header>

    <div class="nav">
      <ul>
        <li class="Home"><a href="Homepage.html">Homepage</a></li>
        <li class="Home"><a href="Over ons.html">Over ons</a></li>
        <li class="tutorials"><a href="Sponsoren.html">Sponsoren</a></li>
        <li class="about"><a href="Kleding.html">Kleding</a></li>
        <li class="about"><a href="Vacaturen.html">Vacaturen</a></li>
        <li class="news"><a class="active" href="Contact.html">Contact</a></li>

      </ul>
    </div>
  </header>

  <div id="bottom">
 <BR>

 <div class="link">
<center><p> Er is nog steeds veel vraag naar vrijwilligers! Heeft u interesse in het zijn van vrijwilliger bij de kledingbank, aarzel dan niet.
Stuur een mail naar <a href="mailto:KledingbankZaltbommel@gmail.com"> Kledingbank Zaltbommel</a> en wij nemen verder contact met u op! </center></p>  
</div>

Answer 1

你必须首先在Jquery中选择项目，所以：

此

nav ul.addClass("main-nav-scrolled");

应该是这个

$(".nav ul").addClass("main-nav-scrolled");

Answer 2

正如其他答案所述，您的jQuery首先没有将元素定义为引用。因此，nav ul.addClass()没有做任何事情，因为没有创建jQuery对象来匹配该引用。

进一步查看您的标记，我会引用header元素来添加粘性类而不是无序列表，因为header是菜单的父级。

因此，您将拥有此脚本（最好在结束</body>标记之前）：

<script type="text/javascript>
$(window).scroll(function() {
   var nav = $('header');

   if( $(this).scrollTop() > 175 ) {
    nav.addClass("main-nav-scrolled");
   }   
   else { 
     nav.removeClass("main-nav-scrolled");
   }
});
</script>

粘性横幅不起作用

2 个答案: