How To Implement Scroll To Fixed Effect?
If you look at the website: http://eyeheartworld.org/pages/the-cause and scroll down, there's an implementation of a concept I found on codepen (when you scroll down, the navigatio
Solution 1:
it's a simple case of adding position: fixed; to a block at the top of your HTML content. Here's a very basic example:
body{
margin: 0;
padding: 0;
}
#top-bar{
height: 40px;
width: 100%;
background-color: #000000;
color: #FFFFFF;
position: fixed;
}
#content{
height: 3000px;
padding-top: 40px;
}<!DOCTYPE HTML><html><head></head><body><divid="top-bar"></div><divid="content">
AAA<br />
BBB<br />
CCC<br />
DDD<br />
EEE<br />
FFF<br />
XXX<br />
YYY<br /></div></body></html>Solution 2:
It basically looks for the height of your screen with: window.innerHeight and adds a class when the amount scrolled is bigger than the height of your screen.
This is the same height as the #introscreen, which is set to 100vh with css. 100vh is basically the same as 100% (More on VH here).
So the 'navbar' is always just below the users' screen, and once you scroll this exact amount, it adds the class 'fixed' which fixes the navbar to the screen. If you scroll back the class gets removed again.
Post a Comment for "How To Implement Scroll To Fixed Effect?"