CODEWITHSUNDEEP
htmlcssfixedstickyscrollto
faliqaiman
faliqaiman

Reputation: 85

Sticky scroll nav menu

Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.

I follow this tutorial, callmenick

Here is the reproduction of it, jsfiddle

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li> <- when any click link, and then click again, there's some action happen. *bugs?*
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
  </ul>
</nav>

Upvotes: 1

Views: 129

Answers (3)

wscourge
wscourge

Reputation: 11311

What you need to do is to add your missing Buy section and in your navigation add href to the link, like:

<nav>
  <ul>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#tech-spec">Tech Spec</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#buy">Buy</a></li> <!-- You are missing your href attribute here -->
  </ul>
</nav>

All the rest seems to work fine.

Upvotes: 0

Mike Duister
Mike Duister

Reputation: 260

I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue

  1. Add anchor class
  2. Add data attribute
  3. Make global function that scrolls to certain point

So for instance

<div id="button-name"></div>

becomes

<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>

Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.

$(".scrollAnchor").click(function(e){
    e.preventDefault();
    anchorDestination = $(this).data("anchor-dest");
    smoothScrollTo(anchorDestination);
});

function smoothScrollTo(element)
{
    $("html, body").stop().animate({
        scrollTop: $(element).offset().top
    }, 1000);
}

Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.

This answer may be more of a teardown than a fix, but I hope this helps

Upvotes: 0

Type-Style
Type-Style

Reputation: 1841

Now I get it,

the Problem is that the fixed nav is not part of the document flow anymore. Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;

You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.

There are a couple ways to to that, but it depends on the layout. First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.

edit: https://jsfiddle.net/ju648br4/4/

Upvotes: 0

Related Questions