310,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.galmenu { height: 400px; overflow: hidden; position: relative; width: 100%; border: 2px solid #0000FF;}
div.zoo-category-list {position: absolute; top: 0; height: 700px;
background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #FF00FF), color-stop(1, #0060BF));
background-image: -o-linear-gradient(top, #FF00FF, #0060BF);
background-image: -moz-linear-gradient(top, #FF00FF, #0060BF);
background-image: -webkit-linear-gradient(top, #FF00FF, #0060BF);
background-image: linear-gradient(to bottom, #FF00FF, #0060BF);
width: 100%;
}
.top{ color: #FFFFFF;
width: 100%;
position: absolute; top: 0;
text-align: center;
}
.bottom { color: #FFFFFF;
width: 100%;
position: absolute;
text-align: center;
bottom: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var parent = $("div.galmenu"),
block = $("div.zoo-category-list"),
top = parent.offset().top,
parentHeight = parent.height() + 2,
blockHeight = block.height(),
ratio = (blockHeight - parentHeight) / parentHeight;
$("body").on("mousemove", parent, function(event) {
var blockTop = (event.pageY - top) * ratio;
block.css({
"top": "-" + blockTop + "px"
})
})
});
</script>
</head>
<body>
<div class="galmenu">
<div class="zoo-category-list"><div class="top">top</div><div class="bottom">bottom</div></div>
</div></body>
</html>
