标头不是't滚动-Javascript

header isn't moving on scroll - Javascript

本文关键字：滚动 -Javascript      更新时间：2023-09-26

我有一个标题中有导航栏的网站。我希望它缩小，并使位置固定。所以基本上是用jquery来更改类。

Javascript/Jquery

<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./jquery-latest.js"></script>
<script>
    $(document).on("scroll", function() {
        if ($(document).scrollTop() > 1 {
            $('#navigation').addClass("stick");
        } else {
            $('#navigation').removeClass("stick");
        }
        });
</script>

HTML

<div id="navigation">
    <!-- BEGINNING OF NAVIGATION -->
    <div style="float:right">
        <!-- BEGINNING OF IDK -->
        <div id="slider"></div> <a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a>
 <a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
 <a href="content.html"><div id="three" class="item"><div class="inside">Content</div></div></a>
 <a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
    </div>
    <!-- END OF IDK -->
</div>
<!-- END OF NAVIGATION -->

CSS代码

#navigation {
    height:40px;
    font-size:20px;
    color:black;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float:right;
    background-color:white;
    padding-top:5px;
    position:relative;
}
#navigation.stick {
    height:40px;
    font-size:20px;
    color:black;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    float:right;
    background-color:white;
    padding-top:5px;
    position:fixed;
}

请帮助

您的if statement中有语法错误，您错过了)，不需要调用多个jquery libraries。

Jsfidle

    $(document).on("scroll", function() {
      if ($(document).scrollTop() > 1) {
        $('#navigation').addClass("stick");
      } else {
        $('#navigation').removeClass("stick");
      }
    });
html {
  height: 2000px;
}
#navigation {
  height: 40px;
  font-size: 20px;
  color: black;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  float: right;
  background-color: white;
  padding-top: 5px;
  position: relative;
}
#navigation.stick {
  height: 40px;
  font-size: 20px;
  color: black;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  float: right;
  background-color: white;
  padding-top: 5px;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navigation">
  <!-- BEGINNING OF NAVIGATION -->
  <div style="float:right">
    <!-- BEGINNING OF IDK -->
    <div id="slider"></div>
    <a href="index.html">
      <div id="one" class="item">
        <div class="inside">Home</div>
      </div>
    </a>
    <a href="about.html">
      <div id="two" class="item">
        <div class="inside">About Us</div>
      </div>
    </a>
    <a href="content.html">
      <div id="three" class="item">
        <div class="inside">Content</div>
      </div>
    </a>
    <a href="contact.html">
      <div id="four" class="item">
        <div class="inside">Contact</div>
      </div>
    </a>
  </div>
  <!-- END OF IDK -->
</div>
<!-- END OF NAVIGATION -->

好的，第一件事-您有4个不同版本的jquery排队，所以将这些行替换为：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

这是通过CDN的jquery的最新版本。

此外，您在无冲突模式下使用jquery，但尚未声明它。因此，将$与jquery交换，或者通过将jquery包装在以下代码中来更改代码为无冲突模式：

jQuery(function($) {
// code here
});

您在if语句上缺少一个结束符"）"，应该是：

$(document).on("scroll", function(){
    if($(document).scrollTop()) > 1{
    $('#navigation').addClass("stick");
    }else{
    $('#navigation').removeClass("stick");
    }
});

我喜欢在里面没有代码的情况下键入我的条件词（if，then，else等），所以类似于：

if(foo = 'test'){
    // do something
} else{
    // do something else
}

另一件事是，我创建了一个div，并给它一个很大的高度，这样滚动就可以工作了。

在那之后，它就完美地工作了！你可以在jsfiddle上查看我的最终代码：https://jsfiddle.net/184edexg/

相关文章：