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 Using jQuery Plugins Add a Sticky Navigation Bar The Plugin Challenge Solution

Vic Mercier
Vic Mercier
3,276 Points
Posted by Vic Mercier
Vic Mercier
3,276 Points

Why when using the getWidthFrom property the selector is "outside" element that we want to fix?

//HTML code
<div class = "container">
<h5 class="work">Want to email us</h5>
</div>
//JavaScript code
$(".work").sticky({
getWidthFrom:".container",//Why the selector couldn't be ".work"
responsiveWidth:true
});

1 Answer

Nicolas Hampton
Nicolas Hampton
44,638 Points

getWidthFrom is looking for the width of the entire sticky element, but our sticky element isn't just the h5 tag here. Think about the sticky element as not only the text, but the space around that text needed to keep it centered. The h5 is centered in the container div, so the div is actually the sticky element. We could add more elements inside the div, and those elements would also be part of the sticky div element.

Because the div is actually our sticky element and it includes the space around the h5 that allows the h5 to be centered in the screen, the div is the element that getWidthFrom needs to know about.

Vic Mercier
Vic Mercier
3,276 Points
Vic Mercier
Vic Mercier
3,276 Points

Your answer is almost perfect.But what does my entire sticky element represent? //Am I right? The getWidthFrom property make sure that all the element around our sticky element will be fixed when trying to increase the size of our browser.

Nicolas Hampton
Nicolas Hampton
44,638 Points

Your question is really unclear, but it feels like you're asking what the sticky element is.

A sticky element is found on a lot of websites, including the top of this website. The treehouse bar at the top of this site follows you down the page, or "sticks" to the top of the page.

Looking at the Treehouse sticky bar, you can see that there's a lot of different elements inside of it, like links and images, and they're all treated as one sticky piece at the top of the page.

Just like the Treehouse bar, are sticky element is more than just the h5 tag. It's the container that holds the h5 tag, and the spacing inside of it.

The getWidthFrom property is helping the plugin understand that everything in this container is part of the sticky, and when the screen adjusts size, to take that into account.