javascript - 粘列垂直滚动

Question

我正在制作一个网格来以特定方式处理内容，并且当到顶部的距离为 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>

Answer 1

刚刚找到了带有 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>