Make a Header disappear and reappear after waiting 2 seconds

Question

I ANSWERED DOWN BELOW

I want to make the header of my document once scrolled play an animation to fade and then use style.display to make it unusable. Here is the code:

<script type="text/javascript">

function Scroll()
    {
        var head = document.getElementById('header')
        if (window.pageYOffset > 1) 
            {
                head.style.display = "none";
                head.style.opacity = "0";
            } else {
                head.style.display = "block";
                head.style.opacity = "1";
            }
    }
window.addEventListener("scroll",Scroll);

</script>

I don't know how to make this though so that it will wait two seconds before running the document.getElementById('header').style.display = "none".

I have in the <style> tag to do the fade out animation with the .opacity, it is just the .display that I want to make wait the 2 seconds of animation.

Also I have no idea how to use JQuery or other documents' code so I need it to be purely in HTML, JavaScript or CSS. Thanks. (I'm a noob)

" I have no idea how to use jquery or other documents' code so I need it to be purely HTML" - you should reconsider that perspective. These libraries make it easier, not harder; you'll have a much better time if you learn to use them rather than doing everything the hard way. — erik258, Jan 03 '17 at 04:46
https://jsfiddle.net/zo5w79bm/2/ isn't an answer but it illustrates the power of libraries like jquery and, in this case, d3.js — erik258, Jan 03 '17 at 04:55

Prajwal · Answer 1 · 2017-01-03T04:51:16.057

1

If what you need is to run after 2 seconds

For that you can make use of setInterval or setTimeout depending on your needs.

setTimeout(function(){ alert("This is after 3 sec"); }, 3000);

setInterval : Runs after every specified time interval.

setTimeout : Runs only once after waiting specified time.

W3CSchool Doc

If what you need is to wait till the DOM is loaded.

For that you will have to check the event DOMContentLoaded. whatever the code you have it should be within this.

document.addEventListener("DOMContentLoaded", function (event) {
function Scroll()
    {
        var head = document.getElementById('header')
        if (window.pageYOffset > 1) 
            {
                head.style.display = "none";
                head.style.opacity = "0";
            } else {
                head.style.display = "block";
                head.style.opacity = "1";
            }
    }
window.addEventListener("scroll",Scroll);
}

I hope this solved your problem.

edited Jan 03 '17 at 04:51

answered Jan 03 '17 at 04:45

Prajwal

3,930
5
24
50

I just added that code into it but it doesn't even disappear now. What am I supposed to do with the domcontentloaded thing? – Fin Jan 03 '17 at 04:50
What exactly you want to do? It waits till DOM gets loaded. Also, it is working for me. Please copy the code and check again. I forgot to add a closing bracket at the end. – Prajwal Jan 03 '17 at 04:54
Is there ANYTHING AT ALL I need to add to the document to get what you listed above to work? – Fin Jan 03 '17 at 05:07
I changed the code, copy and paste it, it should work. – Prajwal Jan 03 '17 at 05:08
I just did but it doesn't do anything. The header just moves with the page, it doesn't actually fade or disappear or anything – Fin Jan 03 '17 at 05:10
Is there something I can add the the 'head.style.display = "none"' part to make it actually run after the transition is complete? – Fin Jan 03 '17 at 05:13
Checkout `setTimeout` – Prajwal Jan 03 '17 at 05:14
how do you use settimeout? can you write the code for that? – Fin Jan 03 '17 at 05:15
Ok I just did that but when I scroll down and then back up it glitches out – Fin Jan 03 '17 at 05:20
Check your CSS styling and transitions. That's the one creating problems. Not JS. – Prajwal Jan 03 '17 at 05:21
#header { height: 100px; width: 100%; position: fixed; background:radial-gradient(circle,#777,#666); transition:all 0.2s ease-out; } – Fin Jan 03 '17 at 05:22
you can refer below article . http://stackoverflow.com/questions/26694385/fade-in-on-scroll-down-fade-out-on-scroll-up-based-on-element-position-in-win – Maneesh Singh Jan 03 '17 at 05:30

score 0 · Answer 2 · answered Jan 03 '17 at 06:55

The best way to approach this for performance and maintainability is to let css handle the animation and only use javascript to capture the event and add a class.

Also, you need a way to make sure the function bound to the scroll event only fires once.

Finally, if you want to destroy the element, you can use javascript to listen for the 'animationend' event (the name is browser-dependent), which is captured by the browser, and fire your function to destroy the element at that time (instead of having a fixed 2 second delay as you are trying to do).

Here's a codepen demo of the implementation I just described: http://codepen.io/anon/pen/NdWGqO

Here's the relevant js and css:

//js
var head = document.getElementById('header');
var hasScrolled = false;

function onScroll() { // a function should only start with a capital letter if it is a constructor
    if (!hasScrolled) {
        head.className += " fade-out";
        window.removeEventListener("scroll",onScroll); // remove this so it only fires once
    }
    hasScrolled = true; // this prevents the class from being added multiple times  
}

function destroyElement() {
    head.className += " hidden"; // the 'hidden' class will give the element 'display : none'
}

function captureEvents () {
    window.addEventListener("scroll",onScroll);

    // capture the animation end event, there are better ways to do this to support all browsers FYI
    head.addEventListener("animationend", destroyElement);
    head.addEventListener("webkitAnimationEnd", destroyElement);
    head.addEventListener("oanimationend", destroyElement);
    head.addEventListener("MSAnimationEnd", destroyElement);
}

document.addEventListener("DOMContentLoaded", captureEvents);

//css

.hidden {
  display: none;
}

.fade-out {
  animation-name: fadeOut;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

@keyframes fadeOut {
    from {opacity: 1; }
    to {opacity: 0; }
}

@-webkit-keyframes fadeOut {
    from {opacity: 1; }
    to {opacity: 0; }
}

score 0 · Accepted Answer · answered Jan 04 '17 at 00:34

I figured it out... here is the code for js:

<script type="text/javascript">

function Scroll()
{
    var head = document.getElementById('header');
    var timeOut;
    var displayNone = 'head.style.display = "none"'
    if (window.pageYOffset < 1)
        {
            clearTimeout(timeOut);
        }
    if (window.pageYOffset > 1) 
        {
            timeOut = setTimeout(function(){displayNone}, 2000);
            head.style.opacity = "0";
        } else {
            head.style.display = "block";
            head.style.opacity = "1";
            stopcount();
        }
}

window.addEventListener("scroll",Scroll);

Then in css:

    #header
    {
        height: 100px;
        width: 100%;
        position: fixed;
        background:radial-gradient(circle,#777,#666);
        transition:all 0.2s;
    }

And finally in HTML:

<header id="header"></header> /* header info goes in here */

idk why but when I set the display none part to a variable it fixed it.

Make a Header disappear and reappear after waiting 2 seconds

3 Answers3