Introduction
Hi everyone, I'm Dave! I came up with a nice little guide on how to create a scroll-fix-content bar with a scrollable sidebar guide (mock). What I used was a leftover JQuery snippet I had from an old project and some CSS3 styling to make it look pretty. Do note, I've only tested how this looks with the 3 sections above the viewport. This isn't fully responsive yet.
P.S. Please support my dad's business, Amish Direct Furniture, by liking our facebook page. Thanks :)
Structure
The structure of how this is set up is actually pretty simple. I used good ol' CSS3 to make most of this look possible. To slim down the code some more, I'll probably rewrite this using SCSS. Below is a tree of how the document structure is set up.
- #guide-template -- #intro-container -- #nav-bar -- #main
Basically, we use the #guide-template as our wrap. This can also be applied to the body tag. We just need something to wrap it all together.
Styling
Most of this is possible by using the CSS3 View Height (vh) unit for our heights. By making certain divs the view ports height, it helps make the scroll-to-fix bar stick more smoothly. This also goes for the sidebar as well. Since we want the intro to always fit the screen, we set the #intro-container div's heigh to:
height: 100vh;
Note though, this isn't cross compatible with everything even though it is mostly supported.
Code
The code used is pretty simple. Derived from this article by Chris Coyier, the JQuery used is to apply and unapply the class fixed from our wrapper div, or in this case #guide-template. What makes this one different and slightly more smoother is the fact we're not using magic numbers, or pre-defined numbers. I'll give both examples of the one Chris provided and the one I'm using. Here is Chris's:
The main, and big, difference between the two is the first one uses a defined number. This is an issue since not all devices are the same height. In the second one, I decided to use the window.innerHeight
to define when to add and remove my class. The reason is because combining that with our height: 100vh;
means on any desktop machine, it will always stick right after our intro div. I haven't tested this to see if it is responsive but I'm sure with some tweaking, it more than likely can be responsive.
Introduction
Hi everyone, I'm Dave! I came up with a nice little guide on how to create a scroll-fix-content bar with a scrollable sidebar guide (mock). What I used was a leftover JQuery snippet I had from an old project and some CSS3 styling to make it look pretty. Do note, I've only tested how this looks with the 3 sections above the viewport. This isn't fully responsive yet.
P.S. Please support my dad's business, Amish Direct Furniture, by liking our facebook page. Thanks :)
Structure
The structure of how this is set up is actually pretty simple. I used good ol' CSS3 to make most of this look possible. To slim down the code some more, I'll probably rewrite this using SCSS. Below is a tree of how the document structure is set up.
- #guide-template -- #intro-container -- #nav-bar -- #main
Basically, we use the #guide-template as our wrap. This can also be applied to the body tag. We just need something to wrap it all together.
Styling
Most of this is possible by using the CSS3 View Height (vh) unit for our heights. By making certain divs the view ports height, it helps make the scroll-to-fix bar stick more smoothly. This also goes for the sidebar as well. Since we want the intro to always fit the screen, we set the #intro-container div's heigh to:
height: 100vh;
Note though, this isn't cross compatible with everything even though it is mostly supported.
Code
The code used is pretty simple. Derived from this article by Chris Coyier, the JQuery used is to apply and unapply the class fixed from our wrapper div, or in this case #guide-template. What makes this one different and slightly more smoother is the fact we're not using magic numbers, or pre-defined numbers. I'll give both examples of the one Chris provided and the one I'm using. Here is Chris's:
The main, and big, difference between the two is the first one uses a defined number. This is an issue since not all devices are the same height. In the second one, I decided to use the window.innerHeight
to define when to add and remove my class. The reason is because combining that with our height: 100vh;
means on any desktop machine, it will always stick right after our intro div. I haven't tested this to see if it is responsive but I'm sure with some tweaking, it more than likely can be responsive.
Introduction
Hi everyone, I'm Dave! I came up with a nice little guide on how to create a scroll-fix-content bar with a scrollable sidebar guide (mock). What I used was a leftover JQuery snippet I had from an old project and some CSS3 styling to make it look pretty. Do note, I've only tested how this looks with the 3 sections above the viewport. This isn't fully responsive yet.
P.S. Please support my dad's business, Amish Direct Furniture, by liking our facebook page. Thanks :)
Structure
The structure of how this is set up is actually pretty simple. I used good ol' CSS3 to make most of this look possible. To slim down the code some more, I'll probably rewrite this using SCSS. Below is a tree of how the document structure is set up.
- #guide-template -- #intro-container -- #nav-bar -- #main
Basically, we use the #guide-template as our wrap. This can also be applied to the body tag. We just need something to wrap it all together.
Styling
Most of this is possible by using the CSS3 View Height (vh) unit for our heights. By making certain divs the view ports height, it helps make the scroll-to-fix bar stick more smoothly. This also goes for the sidebar as well. Since we want the intro to always fit the screen, we set the #intro-container div's heigh to:
height: 100vh;
Note though, this isn't cross compatible with everything even though it is mostly supported.
Code
The code used is pretty simple. Derived from this article by Chris Coyier, the JQuery used is to apply and unapply the class fixed from our wrapper div, or in this case #guide-template. What makes this one different and slightly more smoother is the fact we're not using magic numbers, or pre-defined numbers. I'll give both examples of the one Chris provided and the one I'm using. Here is Chris's:
The main, and big, difference between the two is the first one uses a defined number. This is an issue since not all devices are the same height. In the second one, I decided to use the window.innerHeight
to define when to add and remove my class. The reason is because combining that with our height: 100vh;
means on any desktop machine, it will always stick right after our intro div. I haven't tested this to see if it is responsive but I'm sure with some tweaking, it more than likely can be responsive.