首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何检查一个固定元素是否在它的原始容器中?

如何检查一个固定元素是否在它的原始容器中?
EN

Stack Overflow用户
提问于 2018-06-01 02:51:01
回答 2查看 44关注 0票数 1

我有一个页眉,其中包含一个固定在页面顶部的元素,而滚动该元素在顶部是粘性的。

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内部

EN

回答 2

Stack Overflow用户

发布于 2018-06-01 02:57:08

您可以使用以下命令检查元素的位置:

element.getBoundingClientRect();

也许你可以检查它们的位置,并根据你的标准确定它们是否在“内部”。

票数 0
EN

Stack Overflow用户

发布于 2018-06-01 03:51:12

您可以使用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
      );
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50630948

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档