javascript - 在到达页脚之前隐藏 div

Question

我有以下使用 UIKIT css 框架制作的 HTML 和 js 代码片段，我试图在到达视差 div 容器时隐藏左侧粘性 div。 Codepen link

我为此目的尝试了以下 js 代码，但我一直无法这样做。

document.onscroll = function() {
    if (window.innerHeight + window.scrollY > document.body.clientHeight) {
        document.getElementById('side-content').style.display='none';
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>

<div class="uk-container">
  <div class="uk-text-center" uk-grid>
    <div class="uk-width-1-4">
      <div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="uk-width-3-4">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
        earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
        sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
        Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum. A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse, mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium unde laboriosam deserunt.
    </div>
  </div>
</div>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>

</div>
<footer class="uk-background-primary">
  <div class="container" uk-grid>
    <div class="uk-width-1-4">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
    </div>
        <div class="uk-width-1-4">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
    </div>
        <div class="uk-width-1-4">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
    </div>
        <div class="uk-width-1-4">
    <ul>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
      <li>item1</li>
    </ul>
    </div>
  </div>
</footer>

如果有人可以建议如何隐藏 div，我将非常有帮助。

Answer 1

添加此函数将为您提供准确的元素位置，以便您可以相应地调整代码。

document.onscroll = function() {    
    var div = document.getElementsByClassName("uk-height-large");        
    var divOffset = offset(div[0]); 

    if (window.innerHeight + window.scrollY > divOffset.top + 250) {
        document.getElementById('side-content').style.display='none';
    }
    else{
        document.getElementById('side-content').style.display='block';
    }
}    

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}