如何使侧边栏固定时滚动像粘性

How to make sidebar fixed when scroll like sticky

本文关键字：滚动 定时 何使 侧边栏      更新时间：2024-06-19

好。我的侧边栏有问题。当我向下滚动到"你好，世界？"时，我想固定左侧边栏并向上滚动，侧边栏将像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: 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>

使用position: fixed;作为CSS中的ID bar-fixed。

*/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>

跨越到2020年，现在更容易了：

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