JavaScript - Popup Footnote Disappears if User starts to Scroll

Question

I've currently got a functioning footnote popup. But I only want it to fade away only if the user starts to scroll. From a previously asked question it seems that using the onscroll event would be my best shot. I just need help for implementing this specifically to only trigger when the user hovers over the footnote and the span appears. I have pretty much no experience with js on HTML documents, any help would be appreciated.

Current code:

a.footnote span {
    z-index: -1;
    opacity: 0;
    position: fixed;
    left: 15px; 
    bottom: 20px;
    margin-left: 0px;
    margin-right: 18px;
    padding:14px 20px;
    border-radius:4px; box-shadow: 5px 5px 8px #CCC;
    border:1px solid #DCA;
    background-color: #FEF6BB;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}
 
a.footnote:hover span {
    z-index: 9;
    opacity: 1;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}

<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>

I don't quiet understand the question...do you want the footnote to show when user hovers cursor and remain shown after cursor moved away and only hide it when user start scrolling? — vanowm, Apr 15 '21 at 02:15

score 0 · Accepted Answer · answered Apr 15 '21 at 21:04

That would require javascript.

var footnotes = document.querySelectorAll("a.footnote");

function onMouseEnter(e)
{
  for(let i = 0; i < footnotes.length; i++)
  {
    footnotes[i].classList.toggle("show", e.target === footnotes[i]);
  }
}

function onScroll(e)
{
  onMouseEnter({});
}

for(let i = 0; i < footnotes.length; i++)
{
  footnotes[i].addEventListener("mouseenter", onMouseEnter, false);
}

document.addEventListener("wheel", onScroll, false); //detect mouse wheel
document.addEventListener("scroll", onScroll, false); //detect page scroll, this will not fire if there is nothing to scroll

a.footnote span {
  z-index: -1;
  opacity: 0;
  position: fixed;
  left: 15px;
  bottom: 20px;
  margin-left: 0px;
  margin-right: 18px;
  padding: 14px 20px;
  border-radius: 4px;
  box-shadow: 5px 5px 8px #CCC;
  border: 1px solid #DCA;
  background-color: #FEF6BB;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

a.footnote.show span {
  z-index: 9;
  opacity: 1;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>
<a class="footnote" href="#fuente2"><sup id="texto2">[2]</sup><span>Popup footnote 2</span></a>
<a class="footnote" href="#fuente3"><sup id="texto3">[3]</sup><span>Popup footnote 3</span></a>

JavaScript - Popup Footnote Disappears if User starts to Scroll

1 Answers1