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

时间：2017-08-30 12:02:26

标签： html css sticky

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

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

＆＃13;
＆＃13; 
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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

当页面滚动时，我希望侧边栏贴在顶部。

我想使用position: sticky，但我无法使用和保持侧边栏重叠在其原始位置。 

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

＆＃13;
＆＃13; 
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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

jQuery期望结果的例子：

＆＃13;
＆＃13; 
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');
    }   
});
＆＃13; 
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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案:

答案 0 :(得分：1)

这个css在Chorme上为我工作：

.aside__inner {
    position: sticky;
    top: 0;
    background: lightgrey;
    padding: 2em;
    margin-top: -100px;
}
相关问题
最新问题