Javascript-форум - Смена координаты блока в зависимости от положения курсора

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Смена координаты блока в зависимости от положения курсора (https://javascript.ru/forum/dom-window/64140-smena-koordinaty-bloka-v-zavisimosti-ot-polozheniya-kursora.html)

Смена координаты блока в зависимости от положения курсора

Добрый день.
Есть div .galmenu { height: 400px; overflow: hidden; position: relative;}
В него вложен div.zoo-category-list {position: absolute; top: 0;} высотой гораздо больше.
Задача при перемещении курсора в пределах родительского блока смещать вложенный div вверх-вниз.
Вот такой скрипт:
<script>
jQuery(document).mousemove(function(e) {
var container = document.getElementByClassName(galmenu);
var offset = container.offset();
var relativeY = (e.pageY - offset.top);
jQuery(".zoo-category-list").css("top",(-relativeY + 400)+'px');
});
</script>
Естественно, не работает.
Знатоки, помогите:help:

310,
container список у вас, у списка нет никаких offset и вам нужно разницу высот блоков соотнести с высотой galmenu

прокрутка большого блока в пределах маленького

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>

рони, огромное спасибо за ответ! То, что надо