Как проверить, находится ли фиксированный элемент внутри его оригинального контейнера?

Question

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

HTML-код:

<div class="main_container">
    <div class="wrapper">
        <div class="menu">
          <div class="logo">Logo</div>
         <div class="social-media">
             <div class="facebook">Facebook</div>
             <div class="youtube">Youtube</div>
             <div class="twitter">Twitter</div>
         </div>
         <div class="sticky-container">
            <a class="sticky-element">Button</a>
         </div>
        </div>
   </div>
  <p>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis efficitur elit. Aliquam pulvinar venenatis libero, ac sollicitudin est egestas eu. Morbi egestas lorem at semper pretium. Sed odio diam, suscipit eu felis eget, aliquet malesuada odio.
Phasellus laoreet est in orci bibendum, sed laoreet elit maximus. Aliquam erat volutpat. Vivamus sodales sed magna vel gravida. Sed rutrum venenatis orci, eu ullamcorper ligula sodales pellentesque. Nunc quis mattis tellus. Duis non urna in mi pretium
aliquet. Ut congue, lectus et feugiat laoreet, est urna luctus augue, eu dignissim quam turpis ac nunc. Donec egestas nulla feugiat orci tincidunt convallis. Donec facilisis scelerisque massa, ut rhoncus est sagittis sed. Praesent fermentum quis magna
a sagittis. Donec fermentum cursus urna. Integer sodales sagittis nisl pretium fermentum. Nunc neque felis, luctus sit amet hendrerit sed, malesuada vitae justo. Praesent et massa non turpis lobortis imperdiet. Pellentesque et orci ac augue accumsan
venenatis eget sit amet ante. Etiam sed finibus magna. Etiam ut gravida nisi. Nullam pellentesque massa quis lorem euismod, sit amet ultrices diam consectetur. Proin vestibulum erat auctor mattis rhoncus. Vestibulum pharetra a tortor laoreet scelerisque.
Nullam tristique, libero sed porttitor varius, tellus tortor accumsan lorem, vel semper sem neque at urna. Phasellus in dapibus lorem. Quisque at rutrum risus. Curabitur efficitur non nunc sed semper. Nullam diam sem, iaculis eu ultrices ut, sodales
at magna. Nam semper leo vel bibendum cursus. Nunc tincidunt velit at eleifend tempus. Cras neque nisl, venenatis et lectus ac, blandit laoreet justo. Etiam dignissim, mi vel iaculis scelerisque, arcu ipsum consequat quam, eget elementum libero felis
luctus ex. Cras dignissim eu ante ac dapibus. Etiam condimentum arcu sed est sollicitudin laoreet. Nulla id nulla elit. Sed congue non ligula at maximus. Integer efficitur pretium erat eget mattis. Suspendisse eleifend arcu id ante congue ornare.
Pellentesque fringilla eu sapien a lobortis. Vestibulum aliquam eu risus at suscipit. Phasellus id lectus id lacus laoreet lobortis. Donec dictum porta eros sed vehicula. Pellentesque interdum nisl non arcu consequat dapibus. Etiam aliquam, lacus
eu sollicitudin mattis, tellus ante pellentesque ex, viverra aliquet leo urna nec tortor. Nullam mauris erat, pulvinar at dolor vel, feugiat ultrices est. Integer maximus vulputate turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
eleifend sed nisi at tempus. Donec vulputate, odio vitae feugiat consectetur, sapien dui venenatis nunc, ac vestibulum lacus ligula a ante. Vivamus sit amet accumsan augue, vestibulum ullamcorper libero. Proin vel rutrum ligula. Nam in risus sed ipsum
sagittis imperdiet. Ut eu laoreet nisl, eget vestibulum ipsum. Nullam vulputate felis sit amet orci mollis volutpat. Fusce non dui elit. Nullam posuere ultrices turpis a accumsan.
  </p>
</div>

Вот живая скрипка: https://jsfiddle.net/30shhy3L/2

Как проверить, находится ли элемент .sticky-container внутри .menu?

Answer 1

Вы можете использовать HTMLElement.getClientBoundingRect().

Вот быстрый скрипт для этого:

let menuEl = document.querySelector(".menu");
let stickyEl = document.querySelector(".sticky-container");
let stickyBounds = stickyEl.getBoundingClientRect();

document.addEventListener("wheel", onScroll);
document.addEventListener("resize", onResize);

function onScroll(event) {
  // get menu dimension & bounds
  let menuBounds = menuEl.getBoundingClientRect();
    if (isContained(stickyBounds, menuBounds)){
    stickyEl.style.background = "#990";
  } else {
    stickyEl.style.background = "#900";
  }
}

function onResize() {
  stickyBounds = stickyEl.getBoundingClientRect();
}

function isContained(objBounds, containerBounds){
    return (
      objBounds.top < containerBounds.top + containerBounds.height && 
      objBounds.top + objBounds.height < containerBounds.bottom &&

      objBounds.left < containerBounds.left + containerBounds.width && 
      objBounds.left + objBounds.width < containerBounds.right
      );
}

Answer 2

Вы можете проверить положение элемента следующим образом:

element.getBoundingClientRect();

Возможно, вы могли бы проверить положение каждого элемента и определить, находятся ли они «внутри» по вашему стандарту.