Как уменьшить и увеличить маржу на прокрутке

Question

Я хочу написать javascript-код, чтобы переместить мой текст вверх, уменьшив margin-top (по умолчанию 0), когда окно прокручивается вверх. Но когда я прокручиваю вниз, маржа-топ моего текста не равно 0. Пожалуйста помогите

Fiddle Example

HTML:

<div id="h"> 
    <div id="t">Hello</div> 
    <div id="content"></div> 

CSS:

#h { 
    background:green; 
    width:550px; 
    height:200px; 
    position:fixed; 
    top:0; 
    padding:50px 0 0 100px; 
} 
#t { 
    font-size:40px; 
    color:white; 
} 
#content { 
    background:blue; 
    width:550px; 
    height:700px; 
    margin:200px 0; 
    position:relative; 
} 

JS:

var pos = 0; 
var el = document.getElementById("t"); 
var m = 0; 
window.addEventListener("scroll", function() { 
    if (window.pageYOffset > pos) { 
     m -= 1; 
     el.style.marginTop = m + "px"; 
    } else { 
     m += 1; 
     el.style.marginTop = m + "px"; 
    } 
    pos = window.pageYOffset; 
}, false); 

Answer 1

Вам не нужно добавлять пиксель за пикселем. вы можете просто установить текст маржу непосредственно из scrollTop:

var pos = 0; 
var el = document.getElementById("t"); 
var m = 0; 
window.addEventListener("scroll", function() { 
    el.style.marginTop = -window.pageYOffset/2 + "px"; 
    pos = window.pageYOffset; 
}, false); 

Fixed Example