javascript - How to display an Image after the main page -

I am trying to display a thumbnail version of a logo at the top of the main page, and when the content begins. I also want to disappear once again when I go back to the main page. I have tried some javascript but if anyone has any feedback or suggestion about fixing it, I added some code to JSFiddle for help.

HTML

  & lt; Header & gt; & Lt; Img src = "img.png" id = "logo" /> & Lt; / Header & gt; & Lt; Div id = "home page" & gt; & Lt; Img src = "img.png" / & gt; & Lt; / Div & gt; & Lt; Div id = "main" & gt; This content page is & Lt; / Div & gt;  

css

  header {background color: blue; Width: 100%; Height: 20px; Status: fixed; Top: 0; Border bottom: 1px solid white; } # Home page {margin: 0; Padding: 0; Background color: blue; Height: 500px; } #mainPage img {width: auto; Display area; Margin: 0 auto; } #main {altitude: 500px; } #lollow {visibility: hidden; }  

JS

  function showImg () {var img = document.getElementById ('logo'); Var h = window.white; If (H & l; 600) {img.style.visibility = 'hidden'; } Other {img.style.visibility = 'visible'; }}  

As you can see, you Simply need to set up your function as a handler for the scroll event Additionally, there are different ways of expressing the current scrolling position in different browsers. The following functions in Chrome:

  function showImg () {var img = document.getElementById ('logo'); Var scrolls = window. ScrollY; If (scroll & lt; 600) {img.style.visibility = 'hidden'; } Other {img.style.visibility = 'visible'; }} Document.addEventListener ("scroll", showImg);