Question

好吧，所以我有这段代码（代码下面的代码链接）：

HTML：

<section id="first">
  <h1>Section 1</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id imperdiet tortor, eget bibendum nulla. Pellentesque posuere lorem ut nunc iaculis, quis dictum leo rhoncus. Aenean commodo posuere nisl ac lacinia. Aliquam erat volutpat. Duis sed pulvinar ante. Vivamus aliquet lectus ac massa condimentum, id sodales metus ultricies. Donec ut ornare dolor.
</section>

<section id="second">
  <h1>Section 2</h1>
  <img src="http://dnawrot.nazwa.pl/expressweb/img/display.png" alt="" />
</section>

<section id="third" class="images">
  <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" alt="" /><br />
  <img src="http://animalia-life.com/data_images/bird/bird1.jpg" alt="" /><br />
</section>

<section id="fourth">
  <h1>Section 3</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id imperdiet tortor, eget bibendum nulla. Pellentesque posuere lorem ut nunc iaculis, quis dictum leo rhoncus. Aenean commodo posuere nisl ac lacinia. Aliquam erat volutpat. Duis sed pulvinar ante. Vivamus aliquet lectus ac massa condimentum, id sodales metus ultricies. Donec ut ornare dolor.
</section>

JS：

$(function() {
  var top = new Waypoint({
    element: document.getElementById('second'), 
    handler: function(direction) {
        $('#second').addClass('fixed');
    }
  });

  var top = new Waypoint({
    element: document.getElementById('fourth'), 
    handler: function(direction) {
      $('#second').removeClass('fixed');
     }
  });

  var top = new Waypoint({
    element: document.getElementById('first'), 
    handler: function(direction) {
      $('#second').removeClass('fixed');
     }
  });
});

http://codepen.io/anon/pen/YXrQmY

有四个不同的部分。第一和第四部分可能包含任何内容，仅用于示例的虚拟文本。第二部分包含监视器的png图像，透明框是显示器本身。第三部分仅包含每个下面的图像。

现在我要做的是当滚动到达此部分的顶部然后从显示器下方的第三部分滚动图像时，使第二部分定位固定（通过添加.fixed类）。当滚动命中第四或第一部分时。应删除固定类。此外，我希望在添加.fixed类时，将第三个部分的第一个图像放在显示区域中。最后，它应该是响应:)

我提供的示例在页面的意外区域中删除.fixed类。

听起来很乱，但我不知道如何更好地解释它。

无论如何，我不知道这是否是一种合适的方法，这只是我对如何实现这种效果的想法。也许这种效果有一些扩展，但我找不到任何。

具有固定定位元素

0 个答案: