How to hide DIV when scroll reach at Bottom through CSS?


Tags: javascript,html,css

Problem :

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.



Solution :

Guess you want a pure javascript solution now you havent included the tag ?

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

script :

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

    CSS Howto..

    How would I go about setting a CSS gradient background in JavaScript?

    How can I use CSS for Vaadin components?

    How to get href Text using CSS selectors

    how do I add equal gap on each side of the text with css?

    How to target all elements, except last one with css?

    How to make SVG clip-path work correctly in Google Chrome?

    How to generate a elongated hexagon shape with two circular sides?

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to override Zurb Foundation css properties using rails 3.1?

    Thai line breaking: how to break Thai text effectively

    How to target the first-child of an optgroup with css or jquery

    CSS: How would I select a specific Text and hide it

    How to assign a css class or id to smileys?

    how to make an empty span collapse

    How to make a jquery slider from scratch

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to define CSS anchor text decoration for anchors in a specific container

    How to avoid css overlapping?

    How do you create and run an html page directly from LocalStorage?

    How to extract attribute values using css selectors?

    How to hook up CSS search bar to JavaScript or another server side language

    How to translate html, css and js into one javascript (animation)

    How to “mark” a UL/LI nav item as “active” based on click?

    How do I manipulate the same function in javascript for two different classes

    How to inherit CSS using Less?

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    How to insert spaces/tabs in text using HTML/CSS?

    How to display a centered background of fixed width

    how to get kendo ui mobile style silver

    How to sharpen an image in CSS?