0

https://gist.github.com/flyspaceage/ca0759d155c6c79786b7cb27a15f3629

I am trying to hide my menu until the pagination sequence begins, then the menu would reveal inside the header. Currently, the menu is always visible. The HTML structure is below, while the script is attached as a gist.

<header>
<ul class="pagination">
            <li>
                <a class="" href="#intro">
                    Top
                </a>
            </li>
            <li>
                <a class="" href="#breaking-away">
                    Breaking Away
                </a>
            </li>
            <li>
                <a class="" href="#why-right-now">
                    Why Right Now
                </a>
            </li>
            <li>
                <a class="" href="#testimonials">
                    Testimonials
                </a>
            </li>
            <li>
                <a class="" href="#deep-dive">
                    Deep Dive
                </a>
            </li>
        </ul>
</header>
FlySpaceAge
  • 95
  • 11

2 Answers2

1

How about having it hidden to begin with and then showing it in the after callback?

Luke Haas
  • 672
  • 2
  • 6
  • 16
0

Thanks Luke for the idea to hide and then show. Here is what I came up with as a solution. I used the ready function to hide the menu on load, and then the scroll function to reveal after the user navigates the page.

/*** Hide Navigation Bar on Load ***/
$( document ).ready(function(){
    $(".pagination").css({"display": "none", "visibility": "hidden"});
});

/*** Show Navigation on Scroll ***/
$( document ).scroll(function(){
    $(".pagination").css({"display": "all", "visibility": "visible"});
        if ($(this).scrollTop()==0) {
            $('.pagination').fadeOut(0.2);
        }
        else {
            $('.pagination').fadeIn(0.5);
        }
});
FlySpaceAge
  • 95
  • 11