0

I am a beginner in javascript and can't quite grasp what I need to change to make this work.

This is the link.

I have a container with a collapsable fixed navigation. You should be able to click on each of the nav items and scroll to the chapter. The thing is: it only works coming from the top or 'Chapter 1'. When I click on a nav chapter twice it goes up and down and doesn't just simply go to its anchor.

This is the javascript that I found when I had it set up without a fixed navigation — what to change for it to work the way I want?:

function scrollNav() {
  $('.nav a').click(function(){
    //Toggle Class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('#container').stop().animate({
        scrollTop: $(   $(this).attr('href') ).offset().top - 180
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

Thanks a lot!

iehrlich
  • 3,572
  • 4
  • 34
  • 43
D.Case
  • 1
  • 1
  • 1
    can you give us a https://jsfiddle.net/ that shows the same behavior? – ebbishop Jun 28 '17 at 16:46
  • 1
    I don't think `$( $(this).attr('href')).offset().top` does what you think it does, but it's hard to say without being able to easily inspect js & html – ebbishop Jun 28 '17 at 16:54
  • Hi Ebbishop, thanks for replying. It's my first time setting up a jsfiddle: here's the link. https://jsfiddle.net/fhyjgop7/ I can't get the javascript to work though. I read some stackoverflow threads to see how to solve (change js menu to No wrap-in) but no luck yet. I've added the sticky titles also, for the complete feeling of this container. Could also have something to do with the problem. Thankyou – D.Case Jun 29 '17 at 08:30
  • is the answer below helpful? does it solve your problem? – ebbishop Jun 30 '17 at 13:52
  • Yes, thank you a lot! It's perfect. – D.Case Jul 05 '17 at 16:02
  • in that case, please as answered! :) – ebbishop Jul 06 '17 at 14:32
  • that is, please *mark as answered. – ebbishop Jul 07 '17 at 17:06
  • 1
    I think I am too much of a newbie – If I have less than a reputation of 15, the checkmark is recorded but not displayed publicly.... It says. But I consider this answered. – D.Case Jul 10 '17 at 13:39

1 Answers1

0

See this updated fiddle. I added jquery library, and a console for debugging.

There were two main problems I spotted:

First, use .position() instead of .offset() here. Offset is always relative to the document, while position is relative to the offset parent (which may or may not be the document). See this answer. Since you're interested in the position relative to the parent container, it's .position().top that you should use.

Once that's in place, it's easier to reason about the correct value of scrollTop. When you've scrolled past the target element, its position relative to the #container will be negative. If the chapterPosition is -300 and the current scrollTop is 1000, we want to scroll to 700.

Note, however, that this is because the #container div is fixed-position. In the fiddle above, I put in an alternate way to calculate scroll, if you didn't want sticky headers & so didn't need #container to be fixed.

ebbishop
  • 1,833
  • 2
  • 20
  • 45