how to fade in and out with javascript

Question

I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.

I am looking for vanilla javascript solutions only.

thank you for your help.

// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");

function showMsg() {
  scrollText.className = "show";
}

setTimeout(showMsg, 2000);

// make scroll button fadout ---------------

function scrollHide() {
  var scrollText2 = document.querySelector("#scrollMsg.show");
  var scrllTPosition = scrollText2.getBoundingClientRect().top;
  var screenPosition = window.innerHeight / 0.5;
  if (scrllTPosition < screenPosition) {
    scrollText2.classList.add("scrollHide");
  }
}
window.addEventListener("scroll", scrollHide);

#scrollMsg {
  height: auto;
  position: sticky;
  bottom: 175px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

#scrollMsg.show {
  opacity: 1;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}

#scrollhide {
  opacity: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}

<p id="scrollMsg">scroll</p>

Does this answer your question? [How to do fade-in and fade-out with JavaScript and CSS](https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) — Jesse Reza Khorasanee, Nov 04 '19 at 23:02

Jesse Reza Khorasanee · Answer 1 · 2019-11-05T00:18:53.647

I've added some large divs to allow us to scroll through the document.

// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");


window.addEventListener('scroll', (e) => {
  console.log('user scrolled!')
  scrollText.style.opacity = 0
});

#scrollMsg {
  opacity: 1;
  transition: opacity 1s; 
}

<div style="height:100px"></div>

<p id="scrollMsg">scroll</p>

<div style="height:4000px"></div>

how to fade in and out with javascript

1 Answers1