粘柱垂直滾動

我正在製作一個網格來以特定的方式處理內容，並且我需要使其中一列垂直滾動，然後在到頂部的距離是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

粘柱垂直滾動

回答

相關問題