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 elkeschiffer
elkeschiffer
2,296 Points

problem with indent on top - single page navigation

I'm a beginner in Javascript/Jquery, so I really hope you are gracious with my code and my question.

Please visit my Example and click on a section link.

You can see (maybe use an Inspector), that the section on the top is a little bit indented. I guess it depends on the changing header.

When you click a second time, the position is correct - this means - if the style from the header is already switched - there is no problem anymore.

http://codepen.io/elkeschiffer/pen/BzWjLv

Does someone has a solution for me … please … :)?

2 Answers

Stuart Elmore
Stuart Elmore
84 Points

So this is because when you get the offset the first time, the calculation includes the height of your sticky menu. The second time it doesn't. You can test this by logging out the top offset before setting it on line 10: 

  console.log($( $.attr(this, 'href') ).offset().top);
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);

If you then click on Section 1, the first time it will show 193. The second time it will show 155. If you then inspect the height of your sticky menu you'll see that it's exactly the same as the difference between these numbers (38).

The reason this is happening is that you're making the menu sticky by positioning it absolute, thus lifting it off the page and removing it's impact on the rest of the page. This of course makes every other item after it shift up by the same amount as it was pushing everything else down. There are many ways to get around this problem. One way would be to make a duplicate list that is always sticky and then show / hide it with css (like this forked version of your code).

If you'd like to see any other ways of doing it then let me know :)

elkeschiffer
elkeschiffer
2,296 Points

Ohh thank you!

I did not know you can clone html elements with js - great!

Stuart Elmore
Stuart Elmore
84 Points

Yep - with jQuery it's a one-liner. In pure (vanilla) JS it's a little more complex :)

elkeschiffer
elkeschiffer
2,296 Points
elkeschiffer
elkeschiffer
2,296 Points

Hi Jennifer!

Thanks for your answer but this is not my problem - I made this consciously - I wantet to see where everything starts and overlap.

I mean the indent on the top. Did you click the links?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, then I misunderstood. Sorry. Ok, now I see the problem. Because you said "indent" I thought you meant the left and right sides. But you mean from the top and then click the section again and it fixes the top offset. Here's something interesting. I can replicate the problem on Section 1 and Section 2. However, Section 3 does not react in this way. I will remove my previous answer as I misunderstood the problem. Hope you get it working! :sparkles: