"Sticky Navigation"

[jrdnTRENDS]

Hello,

I’m really hoping someone can help me with this although I cannot provide a live demo for you due to confidentiality.

Basically I have a navigation bar that is at the top of the page and when you scroll it is “sticky” and is still visible at the top. I have moved it 496px from the top, but the second you scroll it immediately jumps to 0px. I would prefer if it would only sticky at the top when it reaches 496px.

I have provided what I am able to at this time..if you know of any snippets of code that will help figure this out I can try and pull those out for you as well.

CSS:

#nav-wrapper {
        -moz-box-shadow: 0 0 20px -10px #000;
        -ms-box-shadow: 0 0 20px -10px #000;
        -o-box-shadow: 0 0 20px -10px #000;
        -webkit-box-shadow: 0 0 20px -10px #000;
    box-shadow: 0 0 20px -10px #000;
    float: left;
    position: relative;
    width: 100%;
    height: 54px;
    z-index: 2000;
        top: 496px;
    }

.fixed {
    opacity: 0.8;
    position: fixed !important;
        -moz-transition: 0.5s opacity;
        -ms-transition: 0.5s opacity;
        -o-transition: 0.5s opacity;
        -webkit-transition: 0.5s opacity;
    transition: 0.5s opacity;
    }

.fixed:hover {
    opacity: 1.0;
    }

I believe this is the javascript triggering the effect:

      // Sticky Navigation

    var aboveHeight = $('#featured-wrapper').outerHeight();
        $(window).scroll(function(){
            if ($(window).scrollTop() > aboveHeight){
            $('#nav-wrapper').addClass('fixed').css('top','0').next()
            .css('margin-top','54px');
            } else {
            $('#nav-wrapper').removeClass('fixed').next()
            .css('margin-top','0');
            }
        });

[jrdnTRENDS]

Thank you for the response @Mottie.

I am using a WordPress theme and attempting to heavily modify it that is why I wasn’t too sure about what to post in order to have it visible for someone to troubleshoot.

Having the top set at 496px moved the position of the navigation to exactly where I wanted it (496px below the banner image).

If you are willing to look into the actual WordPress website I could create an account for you to login and view? I have it configured so you must be logged in to view.

Please let me know as I could email you the login information as well as the URL if you are open to that idea.

Thanks!

Jordan

[jrdnTRENDS]

Here is what is found in the “header.php” file: http://en.textsave.org/TqM

I have not seen that article, thank you. But I don’t think that will help me much in this case as all of the code is pre-existing with the given WordPress theme and I am just attempting to modify it to my specifications.

[__]

…I wasn’t too sure about what to post in order to have it visible for someone to troubleshoot.

The simplest solution is to use an online service (e.g., codepen) to create a demo. Start by copying everything, and then remove parts one-at-a-time until you have the bare minimum HTML + CSS + whatever that still demonstrates the problem.

Then, you can just give us a link. :)

[jrdnTRENDS]

http://codepen.io/anon/pen/IKkcp

Does this work? I’m not all that familiar with JavaScript so I just kept it how it was in the header..but I put some other individual codes in the JS file even though some might duplicate. I apologize I’m not the best when it comes to this specific type of thing.

[jrdnTRENDS]

Wow! lol thanks a lot I feel stupid! But now how can I set it so that when you scroll up the menu sticks back to where it was before you went down the page?

I really appreciate your help.

[jrdnTRENDS]

Here I was thinking it didn’t work and all I had to do was take out “// add this line” But it works great! Thanks a lot I am very grateful for your support.

[Author]

Posts