粘柱垂直滚动

我正在制作一个网格来以特定的方式处理内容，并且我需要使其中一列垂直滚动，然后在到顶部的距离是0.粘柱垂直滚动

在我的CSS，我试过position: sticky;，但不工作。

我也试过把jQuery解决方案与var sidebar = document.getElementById('sidebar'); Stickyfill.add(sidebar);但没有。

我错过了什么？

谢谢

.grid1{ 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 

 
.grade2{ 
 
    display: inline; 
 
} 
 

 
.grid3 { 
 
    display: grid; 
 
    grid-template-columns: 43% 57%; 
 
} 
 

 
.column-1-1 { 
 
float: left; 
 
width: 45%; 
 
background: red; 
 
} 
 

 
.column-1-2 { 
 
float: right; 
 
width: 53%; 
 
background: red; 
 
} 
 

 
.column-2-1 { 
 
float: left; 
 
width: 18%; 
 
background: blue; 
 
} 
 

 
.column-2-2 { 
 
float: left; 
 
width: 67%; 
 
background: blue; 
 
margin-left: 15px; 
 
} 
 

 
.column-2-3 { 
 
float: right; 
 
width: 11%; 
 
background: blue; 
 
} 
 
    
 
.column-3-1 { 
 
grid-column:1; 
 
grid-row: 1; 
 
background: green; 
 
} 
 

 
.column-3-2 { 
 
grid-column:2; 
 
grid-row: 1; 
 
background: green; 
 
} 
 

 
.column-3-3 { 
 
grid-column-start: 1; 
 
grid-column-end: 3; 
 
background: green; 
 
margin-top: 15px; 
 
grid-row: 2; 
 
} 
 

 
.info { 
 
position: sticky; 
 
position: -webkit-sticky; 
 
top: 0; 
 
}

<div class="grid1"> 
 
    <div class="column-1-1"><h6><strong>title1<hr></strong></h6></div> 
 
    <div class="column-1-2"><h6><strong>title2<hr></strong></h6></div> 
 
</div> 
 
<div class="grid2"> 
 
    <div class="column-2-1"><p><strong>text</strong></p></div> 
 
    <div class="column-2-3"><div class="info"><p><strong>infos</strong></p></div></div> 
 
    <div class="column-2-2"> 
 
    <div class="grid3"> 
 
     <div class="column-3-1">text</div> 
 
     <div class="column-3-2">(LONG TEXT)</div> 
 
     <div class="column-3-3">text</div> 
 
    </div> 
 
    </div>  
 
</div>

来源

2017-08-25 crloa

我想你想要的位置是：固定 –

位置：粘作品与coordonates，你尝试过什么哪里didit失败？ –

@ G-Cyr我只是做了一个编辑，显示了我尝试过的东西：CSS - position：sticky; top：0; – crloa

刚刚发现了jQuery代码的解决方案：

Add/remove class with jquery based on vertical scroll?

$(function() { 
 
    var header = $(".info"); 
 
    $(window).scroll(function() {  
 
     var scroll = $(window).scrollTop(); 
 
    
 
     if (scroll >= 90) { 
 
      header.removeClass('info').addClass("info2"); 
 
     } else { 
 
      header.removeClass("info2").addClass('info'); 
 
     } 
 
    }); 
 
});

.grid1{ 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 

 
.grade2{ 
 
    display: inline; 
 
} 
 

 
.grid3 { 
 
    display: grid; 
 
    grid-template-columns: 43% 57%; 
 
} 
 

 
.column-1-1 { 
 
float: left; 
 
width: 45%; 
 
background: red; 
 
} 
 

 
.column-1-2 { 
 
float: right; 
 
width: 53%; 
 
background: red; 
 
} 
 

 
.column-2-1 { 
 
float: left; 
 
width: 18%; 
 
background: blue; 
 
} 
 

 
.column-2-2 { 
 
float: left; 
 
width: 67%; 
 
background: blue; 
 
margin-left: 15px; 
 
} 
 

 
.column-2-3 { 
 
float: right; 
 
width: 11%; 
 
background: blue; 
 
} 
 
    
 
.column-3-1 { 
 
grid-column:1; 
 
grid-row: 1; 
 
background: green; 
 
} 
 

 
.column-3-2 { 
 
grid-column:2; 
 
grid-row: 1; 
 
background: green; 
 
} 
 

 
.column-3-3 { 
 
grid-column-start: 1; 
 
grid-column-end: 3; 
 
background: green; 
 
margin-top: 15px; 
 
grid-row: 2; 
 
} 
 

 
.info2 { 
 
position: fixed; 
 
top: 0; 
 
background:blue; 
 
width: 11%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid1"> 
 
    <div class="column-1-1"><h6><strong>title1<hr></strong></h6></div> 
 
    <div class="column-1-2"><h6><strong>title2<hr></strong></h6></div> 
 
</div> 
 
<div class="grid2"> 
 
    <div class="column-2-1"><p><strong>text</strong></p></div> 
 
    <div class="column-2-3"><div class="info"><p><strong>infos</strong></p></div></div> 
 
    <div class="column-2-2"> 
 
    <div class="grid3"> 
 
     <div class="column-3-1">text</div> 
 
     <div class="column-3-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis augue, lacinia ut viverra ac, posuere et nisl. Cras ac erat arcu. Ut et neque vehicula massa viverra auctor. Praesent vehicula justo sit amet enim blandit scelerisque. Aenean ullamcorper vitae dolor non dignissim. Proin vulputate porta ante, nec posuere leo lobortis nec. Fusce id ante a erat tempus pulvinar. Suspendisse magna dolor, tincidunt at tristique a, dictum vel urna. Praesent vehicula justo sit amet enim blandit scelerisque. Aenean ullamcorper vitae dolor non dignissim. Proin vulputate porta ante, nec posuere leo lobortis nec. Fusce id ante a erat tempus pulvinar. Suspendisse magna dolor, tincidunt at tristique a, dictum vel urna. 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis augue, lacinia ut viverra ac, posuere et nisl. Cras ac erat arcu. Ut et neque vehicula massa viverra auctor. Praesent vehicula justo sit amet enim blandit scelerisque. Aenean ullamcorper vitae dolor non dignissim. Proin vulputate porta ante, nec posuere leo lobortis nec. Fusce id ante a erat tempus pulvinar. Suspendisse magna dolor, tincidunt at tristique a, dictum vel urna. Praesent vehicula justo sit amet enim blandit scelerisque. Aenean ullamcorper vitae dolor non dignissim. Proin vulputate porta ante, nec posuere leo lobortis nec. Fusce id ante a erat tempus pulvinar. Suspendisse magna dolor, tincidunt at tristique a, dictum vel urn 
 
     </div> 
 
     <div class="column-3-3">text</div> 
 
    </div> 
 
    </div>  
 
</div>

来源

2017-08-25 20:58:06 crloa

粘柱垂直滚动

回答

相关问题