JS is not working nothing is showing in my console box but HTML and CSS are working

var header = document.getElementById('header');

function fadeOutOnScroll(element) {
    if (!element) {
        return;
    }

    var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
    var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;

    var opacity = 1;

    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }

    if (opacity >= 0) {
        element.style.opacity = opacity;
    }
}

function scrollHandler() {
    fadeOutOnScroll(header);
}

window.addEventListener('scroll', scrollHandler);
#headerbtn{
    border-radius: 10px;
    font-size: 18px;
    background-color: black;
    color: aliceblue;
    top: 50%;
    padding: 9px 12px 9px 15px;
    border: none;
    position: absolute;
    left: 46%;
    top: 53%;
    transform: translate(-40%,-42%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="header">
    <p>A better way</p>
    <p>to present design.</p>
    <p>Generate 3D device mockup in a quick and engaging way.</p>
    <Button id="headerbtn">Get started, it's free ></Button>
    <button id="headerbtn1">Open editor</button>
</header>

Mayank Jha is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1

In this code snippet I made.. (You should have given us this code snippet) it looks like it’s working. Can you give some more details?

var header = document.getElementById('header');

function fadeOutOnScroll(element) {
    if (!element) {
        return;
    }
    
    var distanceToTop = window.pageYOffset + element.getBoundingClientRect().top;
    var elementHeight = element.offsetHeight;
    var scrollTop = document.documentElement.scrollTop;
    
    var opacity = 1;
    
    if (scrollTop > distanceToTop) {
        opacity = 1 - (scrollTop - distanceToTop) / elementHeight;
    }
    
    if (opacity >= 0) {
        element.style.opacity = opacity;
    }
}

function scrollHandler() {
    fadeOutOnScroll(header);
}

window.addEventListener('scroll', scrollHandler);
#headerbtn{
    border-radius: 10px;
    font-size: 18px;
    background-color: black;
    color: aliceblue;
    top: 50%;
    padding: 9px 12px 9px 15px;
    border: none;
    position: absolute;
    left: 46%;
    top: 53%;
    transform: translate(-40%,-42%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header id="header">
        <p>A better way</p>
        <p>to present design.</p>
        <p>Generate 3D device mockup in a quick and engaging way.</p>
        <Button id="headerbtn">Get started, it's free ></Button>
        <button id="headerbtn1">Open editor</button>
 </header>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>