sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide sidebar ads when footer is visible on scroll

Browse Source 
Implement IntersectionObserver to dynamically hide and show sidebar ads based on footer visibility, preventing overlap.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6415d098-eca3-40b1-9bdb-5e0d7a34da1c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-06 15:14:37 +00:00
parent 78049cc867
commit 9db1b3c6a2
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772809982070.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 KiB

25
client/src/components/adsense.tsx
View File

@ -124,9 +124,26 @@ export function MultiplexAd() {
export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: number }) {
const gap = 10;
const offset = contentHalfWidth + gap;
const [footerVisible, setFooterVisible] = useState(false);
useEffect(() => {
const footer = document.querySelector("footer");
if (!footer) return;
const observer = new IntersectionObserver(
([entry]) => setFooterVisible(entry.isIntersecting),
{ threshold: 0 }
);
observer.observe(footer);
return () => observer.disconnect();
}, []);
return (
<div className="relative">
<div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ left: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-left-sidebar">
<div
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ left: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-left-sidebar"
>
<div className="pointer-events-auto">
<AdSense
slot="2398082838"
@ -135,7 +152,11 @@ export function PageSideAds({ contentHalfWidth = 640 }: { contentHalfWidth?: num
/>
</div>
</div>
<div className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none" style={{ right: `calc(50% - ${offset}px - 160px)` }} data-testid="ad-right-sidebar">
<div
className="hidden 2xl:flex fixed top-0 bottom-0 w-[160px] z-10 items-center justify-center pointer-events-none transition-opacity duration-300"
style={{ right: `calc(50% - ${offset}px - 160px)`, opacity: footerVisible ? 0 : 1 }}
data-testid="ad-right-sidebar"
>
<div className="pointer-events-auto">
<AdSense
slot="2398082838"