好的。我的边栏有问题。当我向下滚动“你好，世界？”时，我想让左侧边栏固定并向上移动侧边栏会像 STICKY 一样上升。我不想使用插件。我需要一些短代码。它仅用于此。帮助我使用 jsfiddle。谢谢
*/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>最佳答案
更新:
我想我知道你想要什么。使用 Javascript 更新了代码。
我正在设置滚动限制，超过该限制我将向侧边栏添加一个名为 .stickIt 的类并将其固定在一个位置。
演示:
/* 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.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>关于javascript - 像粘性一样滚动时如何使侧边栏固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36625690/