Question

有没有办法在HTML视图中向下滚动后冻结列。例如;

我有html视图，如;

 <div class="row" id="firstRow">
    ...
 </div>

 <div class="row" id="secondRow">
    <div class="sticky-left-banner"></div>
 </div>

我基本上想要在用户启动视图secondRow时冻结左列。我为冻结创建了CSS类，但它从firstRow开始冻结了列。有没有办法用纯Javascript或其他东西来做？

我的CSS类用于冻结;

.sticky-left-banner{
position:fixed;
top:100px;
left:50px;
height:200px;
opacity:0.9;
}

Answer 1

您可以通过检查是否滚动到行的位置，然后根据该行切换类来执行此操作。点击下面的蓝色按钮试试吧，告诉我这不是你想要的效果：

$(window).scroll(function(){
  $('.columnLeft').toggleClass(
    'sticky-left-banner',
    $(window).scrollTop() > $('#secondRow').offset().top
  );
});

.row{
  position: relative; /* Makes position of sticky div relative to its parent row */
}

.columnLeft{
  position:absolute;
  top: 100px;
  left: 50px;
  height: 50px;
  width: 30px;
}

.sticky-left-banner{
  position: fixed;
  opacity: .9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row" id="firstRow">
    <h2>This is an example title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vehicula lacinia. Ut ex sem, euismod vitae lacus ultrices, laoreet euismod quam. Praesent urna eros, auctor non commodo non, volutpat et urna. Maecenas justo lorem.</p><p>Aliquet eu semper sit amet, pharetra in sem. Suspendisse ut lorem lectus. Phasellus ut suscipit enim, eu efficitur urna. Pellentesque congue, magna et rhoncus pellentesque, tellus nunc commodo urna, ut vulputate orci tellus in nulla. Fusce gravida sollicitudin mi, et blandit neque cursus eget. Nullam a diam pretium turpis ullamcorper gravida sed id turpis. Duis et nisl diam.</p><p>Proin pharetra pulvinar neque, sed dictum metus accumsan ut!</p>
 </div>

 <div class="row" id="secondRow">
    <div class="columnLeft"></div>
    <h2>Here comes the second section</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies vehicula lacinia. Ut ex sem, euismod vitae lacus ultrices, laoreet euismod quam. Praesent urna eros, auctor non commodo non, volutpat et urna. Maecenas justo lorem.</p><p>Aliquet eu semper sit amet, pharetra in sem. Suspendisse ut lorem lectus. Phasellus ut suscipit enim, eu efficitur urna. Pellentesque congue, magna et rhoncus pellentesque, tellus nunc commodo urna, ut vulputate orci tellus in nulla. Fusce gravida sollicitudin mi, et blandit neque cursus eget. Nullam a diam pretium turpis ullamcorper gravida sed id turpis. Duis et nisl diam.</p><p>Proin pharetra pulvinar neque, sed dictum metus accumsan ut!</p><p>Phasellus vel urna tellus. Aliquam eu ultricies ante. Maecenas pellentesque tellus eget nisi mattis vulputate. Aliquam at urna tellus. Fusce fringilla, lacus in posuere scelerisque, purus tellus finibus lorem, vitae congue mauris mi sit amet diam.</p><p>Fusce tincidunt, metus in molestie pulvinar, ex urna laoreet urna, nec viverra ligula justo a nisl. Nunc nisi nisl, dapibus eu augue ac, congue eleifend ante. Ut euismod, elit vel facilisis lobortis, neque velit euismod sapien, a pretium augue lorem tincidunt justo.</p><p>Nam varius molestie ullamcorper. Nulla varius, justo quis sollicitudin faucibus, libero tellus ultrices nibh, non pellentesque enim lectus id nisl. Fusce quis mattis dolor. Duis id libero nec odio feugiat lobortis ut porttitor metus. Donec ac velit condimentum urna elementum mollis.</p><p>Suspendisse interdum est et sem molestie tincidunt. Sed et facilisis dui. Donec mauris elit, mollis sit amet justo quis, lobortis tempor ex. Nullam eleifend leo sit amet ex tincidunt, vitae laoreet ante bibendum.</p><p>Quisque eu sodales sapien. Sed ullamcorper mauris ac justo ultricies, hendrerit tempus lacus accumsan. Nam vitae dui eget justo consectetur rutrum. Nunc ultricies eros id placerat semper. Nam a lacus lorem.</p><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;color:#fff}h2,p{margin-bottom:1em}.row{padding:1em 5% 1em 20%}#firstRow{background:#2682b1}#secondRow{background:#c92c4b}.columnLeft{background:rgba(255,255,255,.3)}</style>
 </div>

Answer 2

$(document).ready(function(){
  $(window).scroll(function(){
    $('.row').addClass('.sticky-left-banner');
   });
});

此功能应在滚动时将类添加到.row div。如果你能给我一个带有行html的jfiddle，我可以为你修改它;）

在HTML中的行视图后冻结列

2 个答案: