Skip to content

Instantly share code, notes, and snippets.

@daviddarnes

daviddarnes/script.js

Created February 8, 2022 13:10
Show Gist options
  • Save daviddarnes/25df15843e204ff45c1a553df6a23cd0 to your computer and use it in GitHub Desktop.
Save daviddarnes/25df15843e204ff45c1a553df6a23cd0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. daviddarnes revised this gist Feb 8, 2022. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    // Back to top button
    const targetEl = document.querySelector("#theButtonOrElement");
    const watchedEl = document.querySelector("#TheElementYoureWatching");

  2. daviddarnes created this gist Feb 8, 2022.
    16 changes: 16 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    // Back to top button
    const targetEl = document.querySelector("#theButtonOrElement");
    const watchedEl = document.querySelector("#TheElementYoureWatching");

    const intersectionObserver = new IntersectionObserver((entries) => {
    if (entries[0].intersectionRatio > 0) {
    footerTopButton.setAttribute("data-visible", false);
    } else {
    footerTopButton.setAttribute("data-visible", true);
    }
    });

    if (targetEl && watchedEl) {
    targetEl.setAttribute("data-visible", false);
    intersectionObserver.observe(watchedEl);
    }
    10 changes: 10 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    [data-visible="false"] {
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    }

    [data-visible="true"] {
    opacity: 1;
    visibility: visible;
    }