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
Guil Hernandez
Treehouse TeacherForum Tip: "Page Pocket" Scroll Effect
Hi everyone,
I created a new tip that shows you how to replicate that neat “page pocket” scroll effect used on the Treehouse site with a few lines of CSS and the jQuery scroll event.
If you have any tip suggestions, let me know in the comments or on Twitter. :)
18 Answers
Sylinic .
2,761 PointsGuil Hernandez , the people's Champion.
Devin Gray
39,261 PointsYou guys should create an entire "Forum Tip" section just like you have sections for everything else. Just my thoughts.
Luis Kentzler
13,869 PointsI agree! And with some notes on what you need to know to watch the tip. I don't know anything about jQuery (yet!) so I don't feel I could learn from this. Also, levels (?) for each tip.
Jacob Boykin
8,424 PointsAwesome! I can't tell you how much I love this site. Thanks, Guil!! :)
Andrew McCormick
17,730 Pointseasy enough! Thanks!
Travis Avey
18,876 PointsThanks! Thank was simple, yet helpful!
Adam Wiggall
6,811 PointsGuil,
Thanks for this tip. Just a note to say that in the javascript you introduced a global variable (considered a bad practice) by separating the variable declarations with a semi-colon.
var something = "I am a locally scoped variable";
something_else = "I am globally scoped";
Had you used a comma after the first declaration both would be scoped locally (which is probably what you wanted). Alternatively the var keyword could be used to achieve the same thing.
var something = "I am a locally scoped variable",
something_else = "Now I am locally scoped too";
or
var something = "I am a locally scoped variable";
var something_else = "I am also locally scoped";
Thanks
Jeff Busch
19,287 PointsHi Adam,
If you are referring to these variables:
var tb = $('.top-bar');
tbs = "top-bar-scrolled";
Both are already global considering they are declared outside of any function or class etc.
Jeff
Michael Trilford
7,232 Pointscalc ( ) - WOW! Where have I been?
Dan Gamble
4,122 PointsThis is really simple yet so insightful for someone like me who is very new to learning jQuery!
Prathom Satapronpinyo
12,759 PointsThis is really cool effect, Thanks Guil!
David Moore
13,916 PointsVery nice effect and tip! Thanks for sharing it with us!
Rob Bosch
17,751 PointsAwesome, Thanks for the tip !
Jeff Busch
19,287 PointsThanks Guil,
That was neat and simple. I downloaded the project files and was playing with them a little. At the bottom of the index file I noticed a link to a javascript file (jquery-2.1.0.min.js). I commented that line out to see what happened and the only difference I could see in the browser was the shadow not showing at the bottom of the top bar. I looked at the contents of the jquery-2.1.0.min.js file and it had about a thousand lines off code in it. What is all that code really doing?
Jeff
Lauri Mei
2,389 Pointsthe jQuery file is a JavaScript library full of methods you can call out with a single line of code. Like the "addClass" or "removeClass" method Guil called out. For "addClass" to work like it does, there is several lines of JS code. Its probably really complex, but we don't need to know the code to use the method. Like my programming teacher used to say: You don't need to build the wheel every time you want to ride.
Luis Felipe Lino
Full Stack JavaScript Techdegree Student 15,708 PointsNice tip, thanks a lot. We can try it with some smooth effects like this:
rayorke
27,709 PointsExcellent.Thank you!
I'd love to see more of these in the future. I'm very intrigued with the workspace tool.
Adam Wiggall
6,811 PointsJeff,
Take another look. They are both declared inside the anonymous (callback) function passed the .ready() method. tb is therefore scoped to that function, tbs is global.
Adam
Jeff Busch
19,287 PointsApparently the video code and the code in the project files are not the same. The code in the project files (script.js) is as follows:
// $(document).ready() not necessary since we're loading jQuery / scripts at the bottom of the HTML document.
var tb = $('.top-bar');
tbs = "top-bar-scrolled";
$(window).scroll(function() {
if( $(this).scrollTop()) {
tb.addClass(tbs);
}
else {
tb.removeClass(tbs);
}
});
shahardekel
20,306 PointsThis is really nice. It would be great if you can also explain how the parallax backgrounds effect works (when you scroll, and the background changes, creating that 3D feeling. Sort of...)
Jakub Luchtaj
10,011 PointsThanks Guil, looks like you’ve just reinvented Christmas!
John Doe
2,440 PointsHey there and thank you Guil for a great looking solution!
I have been trying to implement it on my dev site running drupal + bootstrap but unfortunately whenever I set position: fixed to the top navigation container the grid seems to break pulling the fixed container out of the page flow. Any ideas on how to overcome this?
Guil Hernandez
Treehouse TeacherHi John Ntetsolis,
Can you post a link to your project?
John Doe
2,440 PointsHey Guil and sorry for the late reply. The project is on taxexperts.betahost.gr and to access it you will set u/n: open p/w: sesame.