粘柱垂直滚动

Question

我正在制作一个以特定方式处理内容的网格，当顶部距离为0时，我需要将其中一列垂直滚动到左侧列的长文本中

在我的CSS上，我已尝试position: sticky;，但无效。

我还试图将jQuery解决方案与var sidebar = document.getElementById('sidebar'); Stickyfill.add(sidebar);放在一起，但没有。

我错过了什么？

谢谢

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>