Форум

DynkanMaclaud · #1 (**permalink**) 13.01.2015, 21:30

на сайте при прокрутке див с id='fx_bg' меняет opacity . при подробном исследовании я понял что изменение опасити зависит от дельты $(window).scrollTop(); (так как при стандартном увеличении на ноуте 1366x768 она равна 100, а при 50% она равна 200 ) и соотвественно опасити при увеличении 100% - меняется с шагом 0.1 , а при 50% - 0.2 . Но я не знаю как вытащить дельту из

$(window).scrollTop();

рони · #2 (**permalink**) 13.01.2015, 21:59

DynkanMaclaud,
смотрите максимальный скролл и текущий -- больше ничего ненужно

ruslan_mart · #3 (**permalink**) 13.01.2015, 22:01

DynkanMaclaud, дельта передаётся в event ф-ции.

$(window).on('mousewheel', function(e) {
    alert( e.wheelDelta );
});

Но можно без дельты:

var scrollHeight = $(document).height();

$(window).scroll(function() {
    myElem.style.opacity = 1 / scrollHeight * $(this).scrollTop();
});

рони · #4 (**permalink**) 13.01.2015, 22:18

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body{
  height: 1500px;
}

.wrap {
  left:0;
  top:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:fixed;
  background-color:rgba(0,0,0,0);
  color:#fff;
}
div.cnt {
  position:absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin:auto;
  width:200px;
  height:100px;
  border: solid 1px;
}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
     $(window).scroll(function() {
  var o = $(window).scrollTop()/($(document).height()- $(window).height());
  $(".wrap").css({"background-color" : "rgba(0,0,0,"+o+")"})
})
});


  </script>
</head>

<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" width=30%>

 <div class=wrap>
 <div class=cnt></div>
</div>



</body>

</html>

DynkanMaclaud · #5 (**permalink**) 14.01.2015, 01:18

спасибо!!

Форум

Справочник

Discord чат

Курсы javascript