Question: This is my div `style`

```
<style>
#N_fixedBottom
{
   position:fixed;
   bottom:0px;
   left:0px;
   right:0px;
   background-color:#004369;
   width:100%;
   height:20px;
   z-index:100;
}

</style>
<div id="N_fixedBottom">

</div>

```

This `div` should hide when it scroll down to the bottom of page. Because this DIV is hiding my footer.

Answer: 
Guess you want a pure javascript solution now you havent included the tag [jquery](/questions/tagged/jquery "show questions tagged 'jquery'")?

```
<div id="N_fixedBottom">bla bla</div>

```

script :

```js
document.onscroll = function() {
    if (window.innerHeight + window.scrollY > document.body.clientHeight) {
        document.getElementById('N_fixedBottom').style.display='none';
    }
}

```
```
$(window).scroll(function() {
    var fixedBottom = $("#N_fixedBottom");
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        fixedBottom.css("opacity", 0 );
    } else {
        fixedBottom.css("opacity", 1 );
    }
});

```

And then I would add opacity: 0 and transition: opacity 0.5s ease-out to #N\_fixedBottom so it fades in:

```
#N_fixedBottom {
   transition: opacity 0.5s ease-out;
   opacity: 0;
   position: fixed;
   bottom: 0px;
   left: 0px;
   right: 0px;
   background-color: #004369;
   width: 100%;
   height: 20px;
   z-index: 100;
}

```