Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Becky Castle
Becky Castle
15,294 Points

How do I join 2 "if" statements together using jQuery?

I have an instance where I need 2 statements to be true for the result to take place. (I'm just pickin' up jQuery.) What's the correct jQuery lingo to join two "if" statements together?

2 Answers

Aimee Ault
Aimee Ault
29,193 Points

If you have 2 conditions and both need to be true, it'd be like this:

if (a == b && c == d) {
 //your code
}

In this case, the two conditions are 1) a == b and 2) c == d

The && is what joins them together, both go inside the if ()

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Thanks for that clarification, Amy!
Now, what if I have a ">" in the mix? So, maybe my question is really if I can put 3 "if" statements together. Is that possible?

Specifically, I'm wanting my nav bar to disappear when I'm scrolling down, and appear when I'm scrolling up. But if I click an anchor link on the nav bar and it scrolls me up-- well, in that case I want the nav bar to disappear then too.

    //Fade in nav bar
    function showNav(){
            $("nav").fadeIn({
            duration: 400
        });
      }

//Manipulate nav by scrolling

    var lastScrollTop = 0;
    $(window).scroll(function(event){
        event.preventDefault();
       var st = $(this).scrollTop();

       //If user scrolls down,
       if (st > lastScrollTop){      //This is where I think I would like to add more conditional code.  What do you think?

           //Hide nav
           $("nav").fadeOut();                         

       //Else if user scrolls up,
       } else {

          //Show nav
          showNav();
       }
       lastScrollTop = st;
    });
Aimee Ault
Aimee Ault
29,193 Points

Yep, it works the same with > (or really any expression that can be evaluated to true/false). You can chain together as many conditionals as you want:

if (st > lastScrollTop && st < somethingElse && something == somethingElse) {
  $("nav").fadeOut();
}

Hope that helps :)