javascript - jQuery仅在最后一个子元素可见时才添加CSS类

如果最后一个孩子在可见范围内，我想将css类添加到父类。

的HTML

<div class="container">

<div class="left"></div>

<ul>
<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

More items will be here

<li id="last-child">Last item</li>

</ul>
<div class="right">

<p> Some content </p>

</div>

</div>

的CSS

.left{position:absolute;}

.left-fixed{position:fixed;}

因此，当＃last-child在可见范围内时，我想将CSS类.left-fixed添加到div类.left

我要实现的3件事。


当窗口加载时如果#last-child可见，则添加css类.left-fixed
如果调整窗口大小#last-child可见css类.left-fixed并移除（如果不可见）
当滚动#last-child可见的CSS类.left-fixed时，如果滚动上不可见，则将其删除。


有人可以指出我实现此目标的方法吗？我搜索了，但找不到这些问题的答案。感谢您的时间。

最佳答案

您可以使用.getBoundingClientRect()，window.innerHeight

const last = $("#last-child")[0];
const left = $(".left");

$(window).on("resize", function(event) {
  if ((last.getBoundingClientRect().top < -(last.clientHeight)
  || last.getBoundingClientRect().bottom > window.innerHeight)) {
    if (!left.is(".left-fixed")) {
      left.addClass("left-fixed");
    }
  } else {
    if (left.is(".left-fixed")) {
      left.removeClass("left-fixed")
    }
  }
}).resize();

jsfiddle https://jsfiddle.net/hfv89veu/3/

关于javascript - jQuery仅在最后一个子元素可见时才添加CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41519057/