如何隱藏和顯示頁面中特定部分的元素？
[英]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.