stackoom
  简体   繁体   中英

How to make sidebar fixed when scroll like sticky

 原文  2016-04-14 14:08:57  3   4    javascript/ jquery/ html/ css

Question

ok. i have a problem with my sidebar. i want make the left sidebar fixed and go up when i scroll down over "Hello, world ?" and the sidebar will go up like STICKY. i dont want use a plugin. i need some short code. it's only use for that. help me with jsfiddle. thank you

 */i want use javascript.../
 #header { clear:both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px;} h1.head {font-family: verdana; font-size: 200%;} a { color: orange;} .sidebar { float: left; width: 25%; height: 100%;} #text { float: left; width: 70%;} body { text-align:center;} p, pa {text-align: left; font-size: 90%;}
 <body> <div id="header"> <h1 class="head"><b>Hello, world ?</b></h1> </div> <div id="bar-fixed"> <div class="sidebar"> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> </div> </div> <div id="text"> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> </div> </body>

4 answers

solution1
 4  2016-04-14 14:16:48

Update:

I guess I know what you want. Updated the code with Javascript.

I am setting a limit scrolling beyond which I will be adding a class called .stickIt to the sidebar and fixing it at one place.

DEMO: 

 /* it seems javascript..*/ var topLimit = $('#bar-fixed').offset().top; $(window).scroll(function() { //console.log(topLimit <= $(window).scrollTop()) if (topLimit <= $(window).scrollTop()) { $('#bar-fixed').addClass('stickIt') } else { $('#bar-fixed').removeClass('stickIt') } })
 #header { clear: both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px; } h1.head { font-family: verdana; font-size: 200%; } a { color: orange; } #bar-fixed { width: 30%; } #bar-fixed.stickIt { position: fixed; top: 0px; } .sidebar { float: left; width: 100%; height: 100%; } #text { float: right; width: 70%; } body { text-align: center; } p, pa { text-align: left; font-size: 90%; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="header"> <h1 class="head"><b>Hello, world ?</b></h1> </div> <div id="bar-fixed"> <div class="sidebar"> <p class="bar"><a href="#"> Make this fixed when scroll</a> </p> <p class="bar"><a href="#"> Make this fixed when scroll</a> </p> <p class="bar"><a href="#"> Make this fixed when scroll</a> </p> <p class="bar"><a href="#"> Make this fixed when scroll</a> </p> <p class="bar"><a href="#"> Make this fixed when scroll</a> </p> </div> </div> <div id="text"> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> </div> </body>

solution2
 2  2016-04-14 14:12:51

Use position: fixed; for the ID bar-fixed in CSS.

solution3
 0  2016-04-14 14:19:03

 */i want use javascript.../
 #header { clear:both; width: 100%; background-color: darkorange; border-top: 1px solid #d2d2d3; border-bottom: 1px solid #d2d2d3; margin: 20px 0px 20px 0px;} h1.head {font-family: verdana; font-size: 200%;} a { color: orange;} .sidebar { float: left; width: 25%; height: 100%;} #text { float: right; width: 70%;} body { text-align:center;} p, pa {text-align: left; font-size: 90%;} #bar-fixed { position: fixed; }
 <body> <div id="header"> <h1 class="head"><b>Hello, world ?</b></h1> </div> <div id="bar-fixed"> <div class="sidebar"> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> <p class="bar"><a href="#"> Make this fixed when scroll</a></p> </div> </div> <div id="text"> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> <p>I want the sidebar fixed when i scroll down over the Header. and the sidebar will go up LIKE STICKY SIDEBAR</p> </div> </body>

solution4
 0  2020-03-05 00:25:59

Leap forward to 2020 and it's much easier now:

#bar-fixed {
    height: 100vh;
    top: 10px; /* or whatever top you need */
    position: -webkit-sticky;
    position: sticky;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make fixed div (sticky sidebar) scroll up when it reaches footer How can I make my sticky sidebar to scroll up when page scroll reaches the footer? How can I make magento product sidebar sticky when I scroll? How to stop fixed position of sticky sidebar when bottom footer is reached how use sticky sidebar move up when window scroll top How to make collapsible sidebar sticky? How to make a sticky sidebar in Bootstrap? How to create a fixed / sticky sidebar in CSS / JS? make div to behave like a sticky when scroll is reached to certain div Sticky sidebar and fixed column
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM