header isn't moving on scroll - Javascript

Question

I have a website with a navigation bar in the header. I want it to shrink and for the position to become fixed. So basically changing classes with 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>

The 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 Code

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

PLEASE HELP

Answer 1

Ok first thing - you have 4 different versions of jquery enqueued, so replace those lines with:

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

This is the latest version of jquery via CDN.

Also you are using jquery in no conflict mode but haven't declared it. So swap the $ with jquery or change the code for no conflict mode by wrapping your jquery in this code:

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

You are missing a closing ")" on the if statement, should be:

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

I like to to type out my conditionals (if, then, else etc) with no code inside so something like:

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

One other thing I create a div and gave it a large height so that scroll would work.

After that it is working perfectly! You can check out my final code on jsfiddle: https://jsfiddle.net/184edexg/

Answer 2

You have a syntax error in your if statement you missed ) and you don't need to call several jquery libraries.

Jsfiddle

    $(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 -->