Как применить эффект jquery, как только div попадает в самую верхнюю часть экрана или достигает ее?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Как мне применить эффект jquery fadeIn и fadeOut к элементу, как только элемент div достигает самой верхней части экрана?

Комментарии:

1. api.jquery.com/scrolltop

2. Вы хотите сделать это во время прокрутки страницы?

Ответ №1:

 if ($("#divId").scrollTop() == 0) {
    $("#element").fadeIn();
}
  

Ответ №2:

Это должно сработать:

 //bind to the window scroll event, so we check the position every time the user scrolls
$(window).on('scroll', function () {

    // scrollTop() will give you the current window scrolling position,
    // while position().top will give you the vertical position of your element.
    // when the scroll position is >= to the vertical pos of the element...
    // it means that ht element is now at the top of the screen.
    if( $('body').scrollTop() >== $('#divId').position().top) {
         $('#divId').fadeOut();
    }else{
         $('#divId').fadeIn();
    }
});
  

Ответ №3:

Вы должны проверить наличие top значения в offset() . offset дает вам координаты по отношению к документу.

Вызывайте функцию каждый раз, когда ваш div меняет свое положение, и проверяйте —

   if($("#yourDiv").offset().top  == 0){
      //fadeOut
  }
  

Надеюсь, это поможет!