Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Why wont my .js do what I am intending?

I am working on a personal project, but I started with no knowledge so I'm learning as I go.

I wanted a header that gets fixed to the screen when you scroll down so I found some code online for it.. but it wont work. I do know the basics of JavaScript but haven't yet applied it to anything, which is precisely why I don't know what I'm doing here.

What am I doing wrong?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="headerDiv">
<p>example.com</p>
</div>
<nav id="main-navigation">
  <ul>
    <a href="#"><img src="img/up.png"></a>
  </ul>
</nav>
<div id="h1Div">
<h1 id="bodyh1one">Everyone has a dream.</h1><h1 id="bodyh1two">What's yours?</h1>
</div>
<div id="buttonsDiv">
<a href="dontknow.htl"><h3 id="buttonone" class="buttons">I don't know.<br>Help me find out.</h3></a>
<a href="vision.html"><h3 id="buttontwo" class="buttons">I have a vision.<br>Help me realize it.</h3></a>
</div>
<div id="topFooterDiv">
<p>
Never believe that a few caring people can't change<br>the world. For, indeed, that's all who ever have.<br><br>- Margaret Mead
</p>
</div>
<footer>
<div id="footerDiv">
<p>&copy; 2015 Lansana Camara.</p>
</div>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:link {
    color: inherit;
}

.buttons:hover {
    background-color: rgb(63,167,87);
}

#h1Div {
    font-family: 'Open Sans', sans-serif;
}

#headerDiv {
    background-color: rgb(27,12,0);
    padding: 10px;
    padding-left: 85.5%;
    font-size: 1.7rem;
    border-bottom: 1px solid rgb(20,9,2);
    text-shadow: 1px 1px 1px #3E3E3E;
    max-width: 100%;
    height: 35px;
}

nav.fixed-header {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  background-color: rgba(63, 167, 87, 0.7);
}

nav {
  width: 100%;
  height: 50px;
  postion: fixed;
  background-color: rgb(63, 167, 87);
}

nav img {
    width: 40px;
    margin: 5px 10px 10px;
    margin-left: 48.5%;
}

body {
    font-family: sans-serif;
    font-size: 1em;
    background-color: #ECF7FC;
    color: #F4F4F8;
}

body h1 {
    text-align: center;
    margin: 0;
}

body {
    background-image: url("../Project/img/seamless_paper_texture/seamless_paper_texture.png");
}

h1 {
    text-shadow: 1px 1px 5px black;
}

#h1Div {
    box-shadow: inset  0  8px 8px -8px #000, 
                inset  0 -8px 8px -6px #000;
    background-image: url("../Project/img/stardust/stardust.png");
    padding: 25px;
}

#bodyh1one {
    margin-top: 100px;
}

#bodyh1two {
    color: #F4F4F8;
    margin-bottom: 70px;
}

body h3 {
    max-width: 100%;
    display: inline-block;
    margin: 0 10px;
    padding: 20px;  
    background-color: rgb(0,153,204);
}

#buttonsDiv {
    padding: 100px 0;
    text-align: center; 
}

#buttonone {
    box-shadow: 2px 2px 2px #8B8B8B;
}

#buttontwo {
    box-shadow: 2px 2px 2px #8B8B8B;
}

.buttons {
    margin: 100px;
    text-shadow: 1px 1px 1px #3E3E3E;
}

#topFooterDiv {
    box-shadow: inset  0  8px 8px -6px #000, 
                inset  0 -8px 8px -8px #000;
    background-image: url("../Project/img/stardust/stardust.png");
    padding: 15px;
}

#topFooterDiv p {
    text-align: center;
    text-shadow: 1px 1px 2px black;
    color: rgb(63, 167, 87);
    letter-spacing: 1px;
    margin: 20px 0;
}

#footerDiv {
    background-color: rgb(27, 12, 0);
    padding: 10px;
    font-size: 1rem;
    text-shadow: 1px 1px 1px #3E3E3E;
    text-align: center;
    border-top: 1px solid rgb(20, 9, 2);
}

var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
    if ($window.scrollTop() >= 35) {
       nav.addClass('fixed-header');
    }
    else {
       nav.removeClass('fixed-header');
    }
});

3 Answers

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Lansana, The JS that you are using requires 'jQuery'. If you add this line of code above your other javascript in the html file, it will work. I have put some of the other html to give it context. :)

      <p>&copy; 2015 Lansana Camara.</p>
    </div>
  </footer>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>
ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Thank you so much! This was giving me a headache for a good two hours.. of course I was just missing a line of code =P

Now I just need to adjust the height in JS so it does it at the right moment..

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Seeing you're using jQuery now, there are a bunch of functions available through it, check out their docs at jQuery.

Of course you could try something like this ;)

var $window = $(window);
var $nav = $('#main-navigation');
$window.scroll(function(){
    if ($window.scrollTop() >= 35) {
       $nav.addClass('fixed-header');
       $nav.animate({"height":"100px"});
    }
    else {
       $nav.removeClass('fixed-header');
       $nav.animate({"height":"50px"});
    }
});
Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

I changed the 'nav' variable to be '$nav' as it is good practice to use the '$' to show it is a jquery object.

ibbhfsmeaf
ibbhfsmeaf
4,568 Points
ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Thanks! I was actually learning jQuery here on Treehouse but my free trial ran out and I'm a broke college student so I'm stuck until I get money, but I have been trying to learn elsewhere.

I tried your code, and when I scrolled down it didn't do anything different, then I went back up and scrolled down again and it expanded it as your code told it to. However, the arrow stayed near the top of the header rather than adjusting to the middle. I know its something in my code because I am still very inefficient and ineffective in what I write.. only started two weeks ago :/ can you help me fix this? Sometimes I have a hard time centering things so I just set padding and margin until it looks how I want it to (unless I use inline-block or something for nav items), but I'm guessing that is not a good thing to get used to, especially because when I do things like what the code you just gave me does, added with my inefficient code, things won't work as intended.

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

In your code, you have 'if ($window.scrollTop() >= 35) {' which is actually true every time the scrollTop is >= 35. This means it is constantly called until you stop scrolling. If you put a conditional in here so it is only called the first time, it will animate straight away. The arrow is not moving to the bottom because it is still in the same position. You either need to move it in the same way as the height, or make it relative to the bottom of the nav.

Below is the code to fix the scroll not happening straight away. I would suggest getting the rest of your navigation built before continuing as this will help determine how you animate the rest.

var $window = $(window);
var $nav = $('#main-navigation');
var isTop = true;
$window.scroll(function(){
    if ($window.scrollTop() >= 35) {
        if (isTop) {
          isTop = false;
          $nav.addClass('fixed-header');
          $nav.animate({"height":"100px"});
          // other animation code ?

      }
    }
    else {
        if (!isTop) {
          isTop = true;
          $nav.removeClass('fixed-header');
          $nav.animate({"height":"50px"});
          // animate back

      }
    }
});
ibbhfsmeaf
ibbhfsmeaf
4,568 Points
ibbhfsmeaf
ibbhfsmeaf
4,568 Points

I see.. thank you!