Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="content">
- <div class="main">
- Main Content
- </div>
- <div class="sidebar">
- Sidebar
- </div>
- <div class="footer">
- Footer
- </div>
- </div>
- #content{
- position:relative; /* required */
- height:2000px;
- }
- .main{
- margin-left:100px;
- border:1px solid rgb(120,120,120);
- height:1500px;
- }
- .sidebar{
- position:absolute; /* required */
- top:25px; /* required -- does NOT need to be this value, however. */
- left:5px; /* required -- does NOT need to be this value, however.*/
- border:1px solid rgb(8,8,8);
- background:rgba(70,70,70,.9);
- color:#ecebeb;
- width:93px;
- }
- .footer{
- border-top:1px solid #ff0000;
- height:498px;
- }
- $(window).scroll(function(){
- var dist = $(window).scrollTop();
- var sTop = $('.sidebar').position().top;
- var mHeight = $('.main').height();
- var userDist = 100;
- if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
- //the sidebar is pinned now. it won't scroll further.
- }else if(dist < (mHeight - userDist)){
- $('.sidebar').animate({
- top: dist + $('.sidebar').height()
- }, 0);
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement