Элемент исчезает эффект внутри div. Как мне реализовать этот скрипт?

Question

Я пытаюсь внедрить элемент fade (ниже) в мой текст, но, похоже, он не работает. Я не могу понять, почему.

Это моя страница. http://studentreportrarna.se/JMMHT18/Asfaltsnomaderna/

$(window).scroll(function(){
    $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
  });

/*win.scroll(function(){
  scrollPosition = win.scrollTop();
  scrollRatio = 1 - scrollPosition / 300;
  $(".top").css("opacity", scrollRatio);
*/





/*$(window).scroll(function(){
    var scrollVar = $(window).scrollTop();
    $('.top').css("opacity", 1 - scrollVar/300);
})*/

body {
  margin: 0;
  height: 1000px;
}

.top {
  margin: 0;
  position: relative;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
}

.title {
  position: absolute;
  top: 60%;
  left: 100px;
}

<div class="top"><div class="title">Fade Away</div></div>

Answer 1

Должен ли результат вашего / 250 быть целым числом (без десятичных дробей), и нужно ли после него указывать «%»?

Редактировать - как ответ. ** Кроме того, вам необходимо ":" между свойством и значением not ","

$(".top").css({"opacity": Math.round(1 - $(window).scrollTop() / 250) + "%"});

Answer 2

Кажется, вам не хватает фигурных скобок. Чтобы реально изменить CSS с помощью jQuery, вы должны написать:

$(window).scroll(function(){
    $(".top").css({"opacity", 1 - $(window).scrollTop() / 250});
});

Так же, как обычное свойство CSS.