如何隐藏和显示页面中特定部分的元素？
[英]How to Hide and show the element on specific section in the page?
问题描述
在我的网站上，我有一些弹出式浮动模型，它固定在页面底部。 在那个页面上，我有不同的部分。 当我在网站上滚动时，模态仅在某些部分和其他部分可见，它应该隐藏。
以下代码中的示例浮动弹出窗口应在该页面上滚动时隐藏横幅和页脚部分。 但是如果我在该部分的其余部分展示或查看，它应该是可见的。 我想要这种东西。 任何人，请帮助我实现这一目标。
我尝试使用 JavaScript 但它不起作用，此代码隐藏了所有部分的弹出模式。
var mainbanner = document.querySelector(".banner");
if (mainbanner.top != window.self) {
document.getElementByClassName("float-popup").style.display = "none ";
}
section{ height:300px; text-align:center; } section:nth-child(odd) { background:#acacac; } section:nth-child(even) { background:#e47d7d; } p{ color:red; } .float-popup{ position:fixed; bottom:0; left:0; width:100%; background:#000; text-align:center; } body{ position:relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <section class="banner"> <p>banner content</p> </section> <section class="services"> <p>services content</p> </section> <section class="features"> <p>features content</p> </section> <section class="footer"> <p>footer content</p> </section> <div class="float-popup"> <p>float content</p> </div> </body>
4 个解决方案
解决方案1
0 2020-10-22 05:01:12
getElementByClassName 不是函数试试这个
document.getElementsByClassName("float-popup")[0].style.display = "none";
解决方案2
0 2020-10-22 05:02:22
document.getElementByClassName不是 JavaScript 函数，您似乎是指document.getElementsByClassName函数（注意 Element s ），它返回一个数组。 因此，如果只有一个具有该类名的元素，只需获取该数组的第 0 个索引。
像这样：
document.getElementsByClassName("float-popup")[0].style.display = "none ";
const mainbanner = document.getElementsByClassName("banner")[0]; // I'm assuming this is what "mainbanner" variable is if (mainbanner.top != window.self) { document.getElementsByClassName("float-popup")[0].style.display = "none"; }
section{ height:300px; text-align:center; } section:nth-child(odd) { background:#acacac; } section:nth-child(even) { background:#e47d7d; } p{ color:red; } .float-popup{ position:fixed; bottom:0; left:0; width:100%; background:#000; text-align:center; } body{ position:relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <section class="banner"> <p>banner content</p> </section> <section class="services"> <p>services content</p> </section> <section class="features"> <p>features content</p> </section> <section class="footer"> <p>footer content</p> </section> <div class="float-popup"> <p>float content</p> </div> </body>
解决方案3
0 2020-10-22 05:27:28
我猜，当某个 div（横幅/页脚）在视口中可见时，您需要做什么工作。 如果那是您正在寻找的内容，则可以使用它。
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const banner = document.querySelector('.banner');
const footer = document.querySelector('.footer');
const floatPopup = document.querySelector('.float-popup');
document.addEventListener('scroll', () => {
const floatPopupDisplay = isInViewport(banner) || isInViewport(footer) ?
"block" : 'none';
floatPopup.style.display = floatPopupDisplay;
}, {
passive: true
});
解决方案4
0 2021-01-12 06:45:20
即使我一直在寻找完全相同问题的解决方案，但我找到了解决方案。 我尝试了一些代码，效果很好。 这会起作用：
function checkFloatingDiv() { var section1 = document.querySelector('.banner'); var position1 = section1.getBoundingClientRect(); var section2 = document.querySelector('.footer'); var position2 = section2.getBoundingClientRect(); //Checking whether the specified sections are visible //If any of them is visible, then show the float content. Else, hide it. if (position1.top < window.innerHeight && position1.bottom >= 0) { //Show the floating element document.querySelector('.float-popup').style.display = "block"; return; } else { document.querySelector('.float-popup').style.display = "none"; } if (position2.top < window.innerHeight && position2.bottom >= 0) { //Show the floating element document.querySelector('.float-popup').style.display = "block"; } else { document.querySelector('.float-popup').style.display = "none"; } } // Run the function on scroll window.addEventListener("scroll", checkFloatingDiv); // Run the function on load, if any elements are already visible without scrolling window.addEventListener("load", checkFloatingDiv);
section { height: 300px; text-align: center; } section:nth-child(odd) { background: #acacac; } section:nth-child(even) { background: #e47d7d; } p { color: red; } .float-popup { position: fixed; bottom: 0; left: 0; width: 100%; background: #000; text-align: center; } body { position: relative; }
<section class="banner"> <p>banner content</p> </section> <section class="services"> <p>services content</p> </section> <section class="features"> <p>features content</p> </section> <section class="footer"> <p>footer content</p> </section> <div class="float-popup" style="display: none;"> <p>float content</p> </div>
P/S：在这段代码中，我举了一个例子，只有当“横幅”和“页脚”内容在屏幕上可见时，浮动内容才可见。 您绝对可以根据您的要求更改它。
单击标题时，如何隐藏页面的一部分并显示另一部分？ jQuery的
[英]How to hide one section of the page and show the other section when a heading is clicked? jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.