html下滑消失,网页中的一块区域，我想页面上滑的时候显示，页面下滑的时候消失，用js怎么做呢？...

body,div,header,footer,section,ul,ol,span,li,a{

padding: 0;

margin: 0;

}

body{

width: 100%;

height: auto;

}

header{

width: 100%;

height: 100px;

background-color: royalblue;

}

section#con_1{

width: 100%;

height: 500px;

background-color: green;

}

section#con_2{

width: 100%;

height: 600px;

background-color: brown;

}

footer{

width: 100%;

height: 200px;

background-color: grey;

}

var a;

var con1=document.getElementById("con_1");

var con2=document.getElementById("con_2");

function scroll( fn ) {

var beforeScrollTop = document.body.scrollTop,//获取初始滚动高度

fn = fn || function() {};

window.addEventListener("scroll", function() {

var afterScrollTop = document.body.scrollTop,//新的滚动高度

delta = afterScrollTop - beforeScrollTop;//判断滚动方向

if( delta === 0 ) return false;

fn( delta > 0 ? "down" : "up" );

beforeScrollTop = afterScrollTop;

}, false);

}

scroll(function(direction) {

a = direction;

if(a=="up"){

con1.style.display="block";

con2.style.display="none";

}else if(a=="down"){

con1.style.display="none";

con2.style.display="block";

}

});

效果有点生硬，你可以加一些动画效果，可能会更好