如何隐藏和显示页面中特定部分的元素？
[英]How to Hide and show the element on specific section in the page?
问题描述
On my website, I have some popup kind of float model it's fixed at bottom of the page.
在我的网站上，我有一些弹出式浮动模型，它固定在页面底部。 on that page, I have different sections.在那个页面上，我有不同的部分。 when I scrolling on the website that modal will visible only in some sections and for other sections, it should hide.当我在网站上滚动时，模态仅在某些部分和其他部分可见，它应该隐藏。
Example in this below code that floats popup should hide banner and footer sections while scrolling on that page.以下代码中的示例浮动弹出窗口应在该页面上滚动时隐藏横幅和页脚部分。 but if I present or viewing in the rest of the section, it should visible.但是如果我在该部分的其余部分展示或查看，它应该是可见的。 I want this kind of thing.我想要这种东西。 anyone, please help me to achieve this.任何人，请帮助我实现这一目标。
I tried using JavaScript but it's not working, this code hide popup modal for all the sections.我尝试使用 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 is not a JavaScript function, you seem to be meaning the document.getElementsByClassName function (notice the Element s ), which returns an array. document.getElementByClassName不是 JavaScript 函数，您似乎是指document.getElementsByClassName函数（注意 Element s ），它返回一个数组。 So if there is only one element with that class name, just get the 0th index of that array.因此，如果只有一个具有该类名的元素，只需获取该数组的第 0 个索引。
Like this:像这样：
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
I am guessing, that you what to some kind of work when a certain div (banner/footer) is visible in the viewport.我猜，当某个 div（横幅/页脚）在视口中可见时，您需要做什么工作。 If that is what you are looking for you can use this.如果那是您正在寻找的内容，则可以使用它。
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
Even I was looking for a solution to the exactly same problem, and I found the solution to it.即使我一直在寻找完全相同问题的解决方案，但我找到了解决方案。 I tried some code, and it worked fine.我尝试了一些代码，效果很好。 This would work:这会起作用：
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: In this code, I have taken an example that the float content would be visible only when the "banner" and the "footer" content would be visible on screen. P/S：在这段代码中，我举了一个例子，只有当“横幅”和“页脚”内容在屏幕上可见时，浮动内容才可见。 You can definitely change it as per your requirements.您绝对可以根据您的要求更改它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.