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 Owen Boochever
Owen Boochever
14,582 Points

Using a jQuery variable to hide an element on scrolling

Hello!

I'm trying to hide an HTML text element with the ID "title" in a browser window when a user scrolls past an image at the top of the page with the ID "main-image".

I'm able to do this successfully with jQuery using ("#main-image").height(), but I want the "title" element to disappear slightly before the user scrolls past the full image, i.e. the height of the image minus the height of the title element. I've tried the following code and it doesn't work, any thoughts??

    <script>
        var height = $("#main-image").height() - $("#title").height();

        $(window).scroll(function(){
            if($(this).scrollTop() > height {
                $("#title").css({'display': 'none'});
            }
        });
    </script>

Thank you!!

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Owen,

It looks you might be getting a parse error because of a missing parenthesis. In your if statement, I don't see a closing parenthesis for the conditional statement after "height", so try adding that in as everything else looks as though it should work.

Edit: I am wrong twice over as evidently jQuery has a scrollTop() method I was unaware of! lol

       var height = $("#main-image").height() - $("#title").height();

        $(window).scroll(function(){
            //added ending ) after height
            if($(this).scrollTop() > height) {
                $("#title").css({'display': 'none'});
            }
        });
Owen Boochever
Owen Boochever
14,582 Points

Great points but still no dice :/ Thank you though!

Marcus Parsons
Marcus Parsons
15,719 Points

I had to edit my answer again because I was unaware that jQuery had its own scrollTop method so go ahead and add those parenthesis back to scrollTop lol. Also, open up your console and see if you're getting any errors now.