Question

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

Javasrcipt / 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;
}

请帮助

Answer 1

您错过if statement的{{1}}语法错误，而且您不需要拨打多个)。

Jsfiddle

＆＃13;

jquery libraries

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 2

好的第一件事 - 你有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
});

你错过了结束＆＃34;）＆＃34;在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/

我的标题没有滚动

2 个答案: