我使用UIKIT CSS框架制作了以下HTML和JS代码片段， 我试图在到达视差div容器时隐藏左侧粘性div。 https://jsfiddle.net/fnq9v4s5/1/
为此，我尝试使用以下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，我将非常有帮助。
答案 0 :(得分：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 }
}
答案 1 :(得分：0)
您快到那儿了，问题在于您需要考虑document.body.clientHeight是页面的底部，而您正在寻找的是具有“ uk-background-primary”类的元素，对应于您的页脚。
这是代码段：
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.getElementsByClassName("uk-background-primary")[0].offsetTop) {
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>
答案 2 :(得分：0)
在视差元素上使用getBoundingClientRect。
Element.getBoundingClientRect（）方法返回一个 元素及其相对于视口的位置。
它返回一个具有不同属性的对象，其中一个是“ top”。只需用top减去window.innerHeight，如果它<= 0，则它已经出现在视口中。
let sideC = document.getElementById("side-content");
let paral = document.getElementById("parallax");
window.addEventListener("scroll", function() {
if(paral.getBoundingClientRect().top - window.innerHeight <= 0){
$(sideC).fadeOut(1000);
} else {
$(sideC).fadeIn(1000);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="parallax" 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>