CODEWITHSUNDEEP
jqueryhtmlcss
factordog
factordog

Reputation: 597

navigation div hidden under images after using jquery

I have a side bar navigation that appears once you scroll down 300px. However when applying it to my work the navigation doesnt appear. But when working in jsfiddle it appears correctly. So I dont know if its been hidden under images that are on my pc but I just cant seem to figure out why it is below everything.

So the here is the code in question.

       <div id="cbp-fbscroller" class="cbp-fbscroller">
            <nav style="display:none;">
                <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
                <a href="#fbsection2">Section 2</a>
                <a href="#fbsection3">Section 3</a>
                <a href="#fbsection4">Section 4</a>
                <a href="#fbsection5">Section 5</a>
            </nav>
            <section id="fbsection1"></section>
            <section id="fbsection2"></section>
            <section id="fbsection3"></section>
            <section id="fbsection4"></section>
            <section id="fbsection5"></section>
        </div>


.cbp-fbscroller > nav {
    position: fixed;
    z-index: 9999;
    right: 100px;
    top: 50%;
    width: 26px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


 $(window).on('scroll', function() {

    if ($(window).scrollTop() >= 900) {
       $('.cbp-fbscroller nav').fadeIn('slow');
    } else {
       $('.cbp-fbscroller nav').fadeOut('slow');
    }

  });

Now here are two fiddles. One is basically just a code dump that I did to see if it was something wrong my side, but the navigation appear correctly in the fiddle and seems to be hidden under an image when actually working with all the correct images etc. Then the other fiddle is a more simplified version that works normally.

Simple: http://jsfiddle.net/6oaxt61a/20/

Code Dump: http://jsfiddle.net/nwp1yv0s/3/

Both navigations work just when applying it it seems to be stuck under something.

Upvotes: 0

Views: 74

Answers (1)

Byron
Byron

Reputation: 623

Just wanted to post the solution from the discussion here.

The following script was loading before jQuery, therefore you received a "$ is not defined" error which prevented your navigation from loading.

<script src="js/scrollfadein.js"></script>

The solution was to load your scripts in the following sequence:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script src="js/scrollfadein.js"></script>

Upvotes: 1

Related Questions