admin管理员组文章数量:1287119
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, p a {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>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, p a {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
Reset to default 5Update:
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,
p a {
text-align: left;
font-size: 90%;
}<script src="https://ajax.googleapis./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>Use position: fixed; for the ID bar-fixed in CSS.
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;
}
*/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, p a {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>本文标签： javascriptHow to make sidebar fixed when scroll like stickyStack Overflow
版权声明：本文标题：javascript - How to make sidebar fixed when scroll like sticky - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741241472a2364062.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论