如何创建一个最初偏移的粘性侧边栏？

Question

我有一个侧边栏，其位置与网站横幅重叠。

sidebar {
  position: relative;
  top: -100px;
}

section {
  background: url(http://www.paredownhome.com/wp-content/uploads/2016/07/post-background-placeholder.jpg);
  height: 9em;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

main {
  flex: none;
  width: 66.6666%;
  padding-right: 1em;
}

aside {
  position: relative;
}

.aside__inner {
  position: relative;
  top: -100px;
  background: lightgrey;
  padding: 2em;
}





body {
font-family: sans-serif;
line-height: 1.5;
font-size: 18px;
color: #222; margin: 0;}

<section></section>
<div class="container">

  <main>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
  </main>
  <aside>
    
    <div class="aside__inner">
  
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>


    </div>
  </aside>
</div>

随着页面滚动，我希望边栏保持在顶部。

我想使用 position: sticky 但我无法让它工作并且保持边栏在其原始位置重叠。

sidebar {
  position: sticky;
  top: -100px;
}

section {
  background: url(http://www.paredownhome.com/wp-content/uploads/2016/07/post-background-placeholder.jpg);
  height: 9em;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

main {
  flex: none;
  width: 66.6666%;
  padding-right: 1em;
}

aside {
  position: relative;
}

.aside__inner {
  position: sticky;
  top: -100px;
  background: lightgrey;
  padding: 2em;
}





body {
font-family: sans-serif;
line-height: 1.5;
font-size: 18px;
color: #222; margin: 0;}

<section></section>
<div class="container">

  <main>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
  </main>
  <aside>
    
    <div class="aside__inner">
  
      <h4>I should stick to the top</h4>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>


    </div>
  </aside>
</div>

我可以使用 jQuery 达到我想要的效果，但我希望有一个 CSS 唯一的解决方案。

jQuery 期望结果示例：

var pos = $('#scroll').offset().top;   

$(window).scroll(function(){
  
   var parentwidth = $("aside").width(); 
  
    if($(window).scrollTop() > pos) {
      $('#scroll').addClass('fixed').width(parentwidth);
;
    } else {
       $('#scroll').removeClass('fixed').width('initial');
    }   
});

section {
  background: url(http://www.paredownhome.com/wp-content/uploads/2016/07/post-background-placeholder.jpg);
  height: 9em;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

main {
  flex: none;
  width: 66.6666%;
  padding-right: 1em;
}

aside {
  flex: none;
  position: relative;
  width: 33.3333%;
}

.aside__inner {
  position: relative;
  top: -100px;
  background: lightgrey;
}

.aside__content {
  padding: 2em;
 }

.fixed {
  position: fixed;
  top: 0;
}





body {
font-family: sans-serif;
line-height: 1.5;
font-size: 18px;
color: #222; margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<div class="container">

  <main>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p>
  </main>
  <aside>
    <div class="aside__inner" id="scroll">
      <div class="aside__content">
      <h4>I should stick to the top</h4>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus fugit, eum recusandae eaque, voluptates non sit expedita harum qui libero temporibus illum, iste sint facilis deleniti fugiat est eligendi consectetur.</p></div>
    </div>
  </aside>
</div>

没有js可以吗？任何建议表示赞赏！

Answer 1

这个 css 在 Chorme 上对我有用：

.aside__inner {
    position: sticky;
    top: 0;
    background: lightgrey;
    padding: 2em;
    margin-top: -100px;
}

如何创建一个最初偏移的粘性侧边栏？

How to create a sticky sidebar which is initially offset?

html

css

sticky