2

Нужно, чтобы при появлении футера в зоне видимости экрана отработало событие, при этом высота хедера и контентной части могут быть разные.

var headerHeight = document.querySelector("header").clientHeight;
var contentHeight = document.querySelector(".content").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
header {
  height: 100px;
  background: #ccc;
}

.content {
  background: tomato;
  height: 2000px;
}

footer {
  height: 400px;
  background: #222;
}
<header>
  header
</header>

<div class="content">
  content
</div>

<footer>
  footer
</footer>

6
  • высота скролла + высота окна >= позиция по Y футера Commented 24 июн. 2018 в 10:24
  • в коде можно пример? Commented 24 июн. 2018 в 10:37
  • @ИльяШишлачев вы хотите автоматически прокрутить страницу до футера после загрузки документа?
    – user192664
    Commented 24 июн. 2018 в 12:52
  • нет, прокрутка не автоматическая Commented 24 июн. 2018 в 14:07
  • @ИльяШишлачев по клику или как? можно пояснить когда вы хотите прокрутить страницу до футера?
    – user192664
    Commented 24 июн. 2018 в 14:38

3 ответа 3

1

Решение c jQuery

var $element = $('footer');
let counter = 0;

$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();

  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();

  //Если скролл до начала елемента
  var offset = $element.offset().top

  if (scroll > offset && counter == 0) {
    alert('footer!');
    counter = 1;
  }
});
header {
  height: 100px;
  background: #ccc;
}

.content {
  background: tomato;
  height: 2000px;
}

footer {
  height: 400px;
  background: #222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  header
</header>

<div class="content">
  content
</div>

<footer>
  footer
</footer>

Решение на чистом JS

let counter = 0;

window.addEventListener("scroll", function() {
  var elementTarget = document.querySelector("footer");
  //Если начало футера
  //if(...  > (elementTarget.offsetTop - elementTarget.offsetHeight)
  //Если конец футера
  //if(... > (elementTarget.offsetTop))
  (elementTarget.offsetTop - elementTarget.offsetHeight)
  if (!counter && window.scrollY > (elementTarget.offsetTop - elementTarget.offsetHeight)) {
    alert("footer!");
    counter = 1;
  }
});
header {
  height: 100px;
  background: #ccc;
}

.content {
  background: tomato;
  height: 2000px;
}

footer {
  height: 400px;
  background: #222;
}
<header>
  header
</header>

<div class="content">
  content
</div>

<footer>
  footer
</footer>

3
  • js не работает, за jquery спасибо Commented 24 июн. 2018 в 17:16
  • @ИльяШишлачев почему js не работает? здесь работает, может быть что-то пропустили?
    – user192664
    Commented 24 июн. 2018 в 17:47
  • Подтверждаю, способ на чистом JS работает крайне странно. Необходимо footer делать высотой очень серьёзной, как в примере - 400px. Если меньше, то вообще не реагирует (не работает). Что в мобильном браузере, что в обычном. Это можно как то исправить? Commented 11 окт. 2020 в 9:24
1

Вариант с использованием Intersection Observer

const target = document.querySelector('footer');

function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      alert('Footer')
    }
  });
}

const observer = new IntersectionObserver(handleIntersection);
observer.observe(target);
* {
  box-sizing: border-box;
}

header {
  height: 100px;
  background: #ccc;
}

.content {
  background: tomato;
  height: 2000px;
}

footer {
  height: 400px;
  background-color: #222;
  color: #fff;
}
<header>
  header
</header>

<div class="content">
  content
</div>

<footer>
  footer
</footer>

0

Дополню ответ выше, как это возможно реализовать в JS, мб поможет

window.addEventListener("scroll", function() {
  var elementTarget = document.querySelector("footer");
  if (window.scrollY > (document.querySelector("body").offsetHeight - elementTarget.offsetTop)) {
    document.getElementById("myImage").src = "/pict/icon/page_footer.ico";
  }
});

1
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править Commented 9 июл. 2021 в 9:26

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.