Question

确定。我的侧边栏有问题。我想让左侧边栏固定，当我向下滚动“你好，世界？”时向上移动侧边栏会像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>

Answer 1

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

Answer 2

<强>更新

我想我知道你想要什么。使用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>

Answer 3

＆＃13;

difference_type

＆＃13;

size_type

＆＃13;

*/i want use javascript.../

＆＃13;

Answer 4

跨越到2020年，现在要容易得多：

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

滚动时如何固定侧边栏

4 个答案: