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
Nick Pettit
Treehouse TeacherForum Contest: Create a Sticky Header
EDIT: This contest has ended! The next contest is about building interactive charts.
Hi everybody,
It's time for a new Treehouse Forum contest! First, watch this video to learn more:
After you've watched the video, please read the details below carefully. I'm looking forward to your entries!
How to Enter:
Post a link to a working demo of your project as an answer to this forum post. You can host your project anywhere you'd like, as long as it's easy to see your work.
Due Date: All entries must be submitted by Monday, October 13th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.
Prize: The entries will be judged by Treehouse teachers based on design and originality. One winner will receive a free month of Treehouse on us! :) We'll announce the winner on Tuesday, October 14th and reveal the next contest.
Nick Pettit
Treehouse TeacherMichael Hulet Be creative! :)
Jaco Kotzee
Courses Plus Student 20,157 PointsChallenge Accepted!
Don Ricardo JR
9,000 PointsHi, here's my first forum contest submission: https://github.com/dricardo1/TeamTreehouse_StickyHeader
I had fun with this Team Treehouse forum contest. This is a responsive, yet mobile-dedicated version of my personal website. I learned a lot, yet I don't feel that sticky headers are a preferred UI/UX pattern for my designs. I often find them annoyingly "in-your-face". I considered a css fixed-sticky component, but decided against it due to lack of common browser support without a polyfill. I feel a better UI design for usability and UX would be one of the two discussed further here: A UI pattern I've experimented with on my page is called "Quick Return", or "Scroll Up Bar". The implementation of "quick return" is one remedy for "infinite scroll", which can make you loseboth top and bottom navigational elements.
Eduardo Martins Barbosa's scroll up bar plugin,
https://github.com/eduardomb/scroll-up-bar,
among other jQuery fixes, hides the top bar when scrolling down, and shows it when scrolling up. This UI/UX design I find extremely useful in single-page web apps and mobile applications development.
Jane Marianne Filipiak
7,444 PointsHow do I send my folder with the css, img and index.html sites to Treehouse (I am still totally clueless)!
It's a feeble attempt, and basically just copied from the positioning tutorial, but I did add some stylings and images but they got lost in translation. Any advice is much appreciated.
Jane Marianne Filipiak
7,444 Pointshttps://www.mediafire.com/folder/swm90afqf1qd2/Sticky_Header_Jane_Sinclair
Hi! Here is my attempt.
26 Answers
Liudmila Prokharava
10,552 PointsHey Guys! Here is my first contest attempt. http://192.185.98.251/~german/
I've redesigned one of my old sites that i created couple of years ago before i knew css and js to include sticky header. Site is fully responsive as well.
Noel Tekiri
1,009 PointsVery nice clean design.
Blake Penland
762 PointsI love how your header does that. Great work. Looks Awesome. I need to learn that.
Jane Marianne Filipiak
7,444 PointsGreat work. I need to learn all that too.
Katarzyna Walsh
24,409 PointsYes, I also really like it :-)
Ryan Ackermann
14,665 PointsFantastic job!
Ryan Ackermann
14,665 PointsFantastic job!
Aurelian Spodarec
7,369 PointsFirst time I see this effects . it looks awesome.
Alex Age
Courses Plus Student 6,387 PointsHi everyone!
Here is my one: http://clickalex.ga/items/StickyNav/
I didn't have time to make it responsive, but you did not mentioned that it have to be.
- It works in all major browsers, but best in Chrome. *
Michele Pighi
9,287 PointsMy attempt! :)
Noel Tekiri
1,009 PointsHi everybody, this is my sticky header entry. Wanted to play around and have fun with the jQuery scroll object.
Jane Marianne Filipiak
7,444 PointsReally clear design. Did you use a pen tool to create the silhouettes from photos? The silhouettes are very intricate.
Amit Kamble
30 PointsHere is a Simple Sticky Header
John MacDonald
8,593 PointsHey Guys!
Here is my entry (I am only 13 and the design may not be so good but I only whipped it up in a afternoon) Please enjoy and comment!
http://codepen.io/JohnMcCambridge/full/HvlcL/
ps:
its responsive too! Shhhh...
Jane Marianne Filipiak
7,444 PointsFabulous! Love the way one cake spans across the whole screen, showing it's texture and general deliciousness. Another design I need to learn from.
Brayden Kness
12,492 PointsHossam Khalifa
17,200 PointsSorry the link before it was hard to see Please check this out and review it for me: https://drive.google.com/folderview?id=0B3IPW4lpYAXmdW1Uck1xVlNqdzA&usp=sharing
Sage Elliott
30,003 Pointshttp://www.sageelliott.com/tmp/
I used CSS to stick the nav bar at the top. Originally it wasn’t going to be shown until you started scrolling but I decided that I liked it better having the menu available as soon as the page is loaded. With no background color the menu doesn’t take much away from the initial homepage style. I then use Jquery to change the color of background to a transparent black and show a mini version of the logo on the left of the nav bar. There are some unused CSS elements in the nav sections due to me changing my mind about a drop down option.
The site is currently a prototype of my online portfolio, its far from launch ready so don’t judge too harshly ;)
landing leaf
Courses Plus Student 234 PointsHere's my entry: http://sticky-nav-comp.herokuapp.com/
Liz Karaffa
17,576 PointsHere's mine, I kind of did a play on the sticky header with a sticky nav overlay as well.
Andre Romano
8,809 Pointsjuan carlos jara loayza
125 PointsJamie Tuffen
8,042 Pointsjne
12,613 PointsNick Katz
348 Pointshttp://codepen.io/rednosemonkey/full/gFIwB/
No idea what a sticker header is, so I did a sticky head...
Ratik Sharma
32,885 PointsHello everyone! Here's my entry (preview): link.
Also, here is the link to the source code if anyone wants to view it: GitHub.
Key features
Sticky header (duh!)
Responsive design made using a mobile-first approach
Vibrant color palette
Open source :)
Cross browser compatibility for the favicon
All the best, everyone!
crisnoel12
39,853 PointsHere's mine: http://codepen.io/CrisNoel12/full/JfuoB
Jane Marianne Filipiak
7,444 PointsI like your design because...the text is clear and big enough for those of us who haven't sharp eye-sight; the grey against the primary colours makes a bold color design- something you don't see much of on the web as far as I am aware; the font goes with the colors and layout- a bit like Bauhaus. Good Luck!
Christ khodabakhshi
10,916 Pointshttp://goo.gl/YHYUtR <- please write your opinions guys :) tnq
Jane Marianne Filipiak
7,444 PointsI love the cool effect of the color-scheme. I would be intrigued to know more about what the site was saying. The nav buttons, maybe, need to be apparent all the time, that is if you want it easy to use for people not totally conversant with all the ways that a website can be navigated. Anyway, I need to learn how you created this excellent work.
Amber Cookman
12,662 PointsWoohoo, my first entry on a Treehouse forum contest! Here it is.
A heads up, the fonts are linked through Google Fonts and don't load in Chrome until you click the shield in the right side of the URL and select "Load unsafe script" (it's not unsafe, Google needs to trust itself), and don't load on Firefox until you click the shield on the left side of the URL and select "Disable protection on this page".
gareth connop
14,865 PointsHere's my entry http://codepen.io/garethconnop/full/FLgha/
It's a responsive, mobile first design, with a froggy theme.
Hope you like it.
Jane Marianne Filipiak
7,444 PointsFab!
Liz Karaffa
17,576 PointsI really like the magnified blurry header!
Nick Pettit
Treehouse TeacherHi everyone,
Great entries this week! Picking a winner in these is always tough with so many great entires, but the real purpose of these contests are to help you practice and gain experience that you can use in the future. This week's winner is Liudmila Prokharava! We felt that overall she had the most complete design with the best aesthetics. The responsiveness and animation are a really nice touch, as well.
The next forum contest is about building interactive charts!
Norbert Levajsics
2,520 PointsHere's my blind stab at the matter: http://norb.co/labs/sticky/
Blake Penland
762 PointsYour header is SAWeeeet!
Katarzyna Walsh
24,409 PointsLove it!
Katarzyna Walsh
24,409 PointsSimple CSS sticky header - very simple first attempt. http://codepen.io/KasiaWalsh/pen/mDock
David Klaver
10,649 PointsJohn MacDonald
8,593 PointsComic Sans... Yeeeck
Michael Hulet
47,913 PointsMichael Hulet
47,913 PointsIs there any specific website/company that we're supposed to be designing for? Or can we just dream up our own?