Я хочу добавить класс 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 вещи, которые я хочу достичь.

  1. Когда окно загружается, если #last-child виден, добавьте класс css .left-fixed
  2. Если окно изменяет размер #last-child видимый класс CSS .left-fixed и удаляет, если не виден
  3. Когда прокрутите #last-child видимый класс CSS .left-fixed и удалите, если он не виден при прокрутке.

Может кто-нибудь указать мне способ достижения этого? Я ищу, но не могу найти ответ на эти вопросы. Цените свое время.

0
Jordyn 7 Янв 2017 в 10:35

5 ответов

Лучший ответ

Вы можете использовать .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/

2
guest271314 8 Янв 2017 в 06:16

Для этого вы должны использовать 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; }
1
Codesingh 7 Янв 2017 в 07:51

Попробуй это:

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

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

function CheckLastVisible(){
  if($("#last-child").is(":visible")){
      $("#last-child").parents(".left:eq(0)").addClass("left-fixed");
  }
  else{
     $("#last-child").parents(".left:eq(0)").removeClass("left-fixed");
  }
}
1
Bharatsing Parmar 7 Янв 2017 в 08:35

Вы можете сделать, как показано ниже,

$(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");
}
}
1
techhunter 7 Янв 2017 в 07:55

Очень просто!

< Сильный > JQuery :

if($("#last-child").is(":visible")){
    $(".left").addClass("left-fixed");
}
2
GROVER. 7 Янв 2017 в 07:41