4

Так как не владею информацией , хотелось бы получить информацию от и до , как действовать на DIV при прокрутки в центр ?

Конкретных примеров нету , точнее то что я делал оказалось ерундой !

Не интересует готовое решение но требуется грамотное разъяснение с примером здесь Лучший ответ будет вознаграждён через 2 дня 200 балами за труды , конкурс будет объявлен

Уважаемые специалисты поясните как это работает ?

var $win = $(window);
var $marker = $('#marker');
$win.scroll(function() {
  if ($win.scrollTop() + $win.height() >= $marker.offset().top) {
    $win.unbind('scroll'); // load there 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Это взято с тостер и не работало и таких приеров из сети 11 пробовал

7
  • Возможно, стоит почитать о Intersection Observer API?
    – user207618
    13 мар 2017 в 17:10
  • Я пробовал читать но ни чего не понял
    – user33274
    15 мар 2017 в 14:10
  • Это, однако, не причина выбрасывать отличный инструмент.
    – user207618
    15 мар 2017 в 14:11
  • Я изучают его , скажи почему ты не ответил на вопрос ?
    – user33274
    15 мар 2017 в 14:12
  • Не захотел, бывает.
    – user207618
    15 мар 2017 в 14:26

1 ответ 1

6
+200

В вашем примере нет html разметки, поэтому работать он не может, а работает это так:

Складываем значение прокрутки страницы $win.scrollTop() и высоту окна $win.height(), этим мы получаем положение страницы относительно нижней границы окна, так как нам нужно узнать пересек ли элемент нижнюю границу окна, чтобы узнать стал ли он виден, потом проверяем, если это значение больше, чем отступ нужного элемента от верха страницы $marker.offset().top, то значит элемент уже появился внизу окна, соответственно виден.

var $win = $(window);
var $marker = $('#marker');

//отслеживаем событие прокрутки страницы
$win.scroll(function() {
  //Складываем значение прокрутки страницы и высоту окна, этим мы получаем положение страницы относительно нижней границы окна, потом проверяем, если это значение больше, чем отступ нужного элемента от верха страницы, то значит элемент уже появился внизу окна, соответственно виден
  if($win.scrollTop() + $win.height() >= $marker.offset().top) {
    $('#message').html('виден'); //выполняем действия если элемент виден
  }else{
    $('#message').html('не виден'); //выполняем действия если не элемент виден
  }
});
#marker{
  margin-top: 500px;
  width: 200px;
  height: 100px;
  background: red;
}

#message{
  position: fixed;
  left: 20px;
  top: 20px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="marker"></div>

3
  • 1
    @Geyan, На так посчитай координаты центра экрана и сравнивай с ними, а не с нижним краем
    – Grundy
    14 мар 2017 в 6:45
  • @Geyan вместо высоты экрана возьмите половину высоты и получите середину экрана, а не нижний край, это же логично) 14 мар 2017 в 11:34
  • @Geyan ну так я же ответил, вместо $win.height() используйте $win.height()/2, так вы получите середину экрана, а не нижний край 14 мар 2017 в 11:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки