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

Question

如果最后一个 child 在可见范围内，我想向父级添加一个 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 class .left-fixed 添加到 div class .left

我想实现的 3 件事。

1. 如果 #last-child 可见，则在窗口加载时添加 css 类 .left-fixed
2. 如果窗口调整大小 #last-child 可见 css 类 .left-fixed 如果不可见则移除
3. 当滚动 #last-child 可见的 css 类 .left-fixed 时，如果滚动不可见则移除。

有人能告诉我实现这一目标的方法吗？我搜索但找不到这些问题的答案。珍惜你的时间。

Answer 1

可以使用.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/