CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Codi
Codi

Reputation: 438

Multiple jQuery functions based on div id

I have a navigation function that has two parts, the first function don't work but the 2nd does.

https://jsfiddle.net/f7Lnthm1/

if you scroll down you will see the navigation fade in on scroll.. what i am trying to accomplish is have the same links show with no background color, and then when you scroll down the links scroll up with the web site then the same links fade in with the black navbar.

<div id="menu" style="display: block;">Top Bar</div>
<header id="header-active">
    <ul>
        <li>Nav links</li>
    </ul>
</header>
<div id="hero"></div>
<div style="height: 600px;">section 1</div>

Jquery

(function($) {          
    $(document).ready(function(){                    
        $(window).scroll(function(){                          
            if ($(this).scrollTop() > 300) {
                $('#header-active').fadeIn(500);
            } else {
                $('#header-active').fadeOut(500);
            }
        });
    });
})(jQuery);

Upvotes: 0

Views: 55

Answers (1)

Maverick
Maverick

Reputation: 4498

Do you mean something like this? https://jsfiddle.net/f7Lnthm1/3/

Basically, I split up the CSS for #header and the active version of it. You can use CSS for the animations (better to do this than JQuery anyway.

CSS:

#header {
  width:100%; 
  height:75px; 
  color: #000;
  z-index:9999;
  background: none;
}

#header.active {
  position:fixed;
  top:0px;
  background:#000;
  color: #fff;
  transition: all ease-in-out 500ms;
}

Then in the JS:

if ($(this).scrollTop() > 200) {
    $('#header').addClass('active');
} else {
    $('#header').removeClass('active');
}

That obviously pushes the aqua box down, if you want it just to match, setting the background color of #header to background: aqua instead of none like I've done would work: https://jsfiddle.net/f7Lnthm1/6/ I also removed the margin-top from the ul inside #header so the aqua butts up against the red.

If you want it to sit on top of the aqua box, then you would want to set the position of #header to absolute: https://jsfiddle.net/f7Lnthm1/5/

Upvotes: 1

Related Questions