How to display an Image after the main page


Tags: javascript,html,css,html5,css3

Problem :

I'm trying to display a thumbnail version of a logo in the header after I get past the main page and when the content starts. I'd also like it to disappear again once I go back to the main page. I've attempted some JavaScript but if anyone has any feedback or suggestions on how to fix it. I added some code to a JSFiddle for help.

HTML

<header>
    <img src="img.png" id="logo" />
</header>

<div id="mainPage">
    <img src="img.png" />
</div>

<div id="main">
    This is the content page.
</div>

CSS

header {
    background-color: blue;
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid white;
}

#mainPage {
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 500px;
}
#mainPage img {
    width: auto;
    display: block;
    margin: 0 auto;
}
#main{
    height: 500px;
}

#logo {
    visibility: hidden;
}

JS

function showImg() {
    var img = document.getElementById('logo');
    var h = window.innerHeight;
    if(h < 600) {
        img.style.visibility = 'hidden';
    }
    else {
        img.style.visibility = 'visible';
    }
}

http://jsfiddle.net/nkjqLyfg/2/



Solution :

As you can see in my fork of your fiddle, you just need to set up your function as a handler for the scroll event. Also, different browsers have different ways of expressing the current scroll position. The following works in Chrome:

function showImg() {
    var img = document.getElementById('logo');
    var scrollY = window.scrollY;
    if(scrollY < 600) {
        img.style.visibility = 'hidden';
    }
    else {
        img.style.visibility = 'visible';
    }
}

document.addEventListener("scroll", showImg);

    CSS Howto..

    How do I link JS file from other folder to a page?

    How to add !important to every element in a CSS file [duplicate]

    How to make LESS combine CSS rules with a comma

    How do I apply CSS style to ASCII character

    How to Align text with respect to image css

    How to convert a specific part of materialize.scss to css

    How to make a child div alone responsive using css?

    How can I truncate long texts in a table using CSS?

    How to cover box shadow?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    How does this website render images?

    How to set css class 'active' by using C#?

    How to make hover css menu fade in and out?

    How to leave some top gap for H2 title tag with css

    jQuery/HTML Select: Show more text in selected option when select is closed

    how can i make the li inside the div be horizontal?

    How to create a dropdown with lu and li tags like this

    How to “float” an absolutely positioned element div out of its container

    How do i set the HTML tag's “background” property with JS, still allowing other properties from a CSS file to be unchanged?

    How to insert / edit / group css rules faster?

    How to improve the rendering of my HTML/CSS button?

    how to make this gradient vertical

    How to set % height in fluid layout?

    How to customize post excerpt css

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to resize image on window resize in CSS?

    How to stop Injected HTML-div / CSS from inheriting styles ? (Internet Explorer)

    How to change css style value using php in a for loop?

    How to display multi-column article from a single column article data source?

    How to disable correctly CSS3 transition property when needed