Question

如果最后一个孩子在可见范围内，我想向父母添加一个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

我想要达到的三件事。

如果#last-child可见，则在加载窗口时添加css class .left-fixed
如果窗口调整#last-child可见css类.left-fixed并删除，如果不可见
滚动#last-child可见css类.left-fixed并删除如果滚动时不可见。

有人能指出我实现这个目标的方法吗？我搜索但找不到这些问题的答案。感谢你的时间。

Answer 1

很简单！

<强>的jQuery ：

if($("#last-child").is(":visible")){
    $(".left").addClass("left-fixed");
}

Answer 2

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

Answer 3

试试这个：

{{1}}

Answer 4

为此你必须使用jquery：

//When window load if #last-child is visible add css class .left-fixed

if($("#last-child").is(":visible")){
    $(this).parent().addClass("left-fixed");
}

//If window is resize #last-child visible css class .left-fixed and remove if //not visible
if($("#last-child").is(":visible")){
    $(this).parent().addClass("left-fixed");
}
else{
   $(this).parent().removeclass("left-fixed");
}

//如果不使用jquery，还有一种方法可以做到这一点：

.last-child{ display:none; }
.parent:hover .last-child{ display:block; }

Answer 5

你可以这样做，

$(document).ready(function(){
 iflastvisible();

  $(window).resize(function() {
    iflastvisible();
  });
});

function iflastvisible(){
  if($("#last-child").is(":visible")){
      $("#last-child").parents(".left:eq(0)").addClass("left-fixed");
  }
else{
 $("#last-child").parents(".left:eq(0)").removeClass("left-fixed");
}
}

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

5 个答案: