Это действительно математический вопрос, но я не могу узнать, как это сделать. Я хочу использовать scrollTop для медленного уменьшения объекта opacity. Поэтому, когда scrollTop == 1, я хочу opacity быть 1, scrollTop == 2, я хочу opacity быть .99, scrollTop == 3, opacity.98. Может ли кто-нибудь помочь мне с математикой сделать это? Буду признателен за любую оказанную помощь.Convert scrollTop to incremental value
Если вы хотите получить ответ на то, что вы просите, то вы можете сделать следующее:
var position = window.pageYOffset;
var opacity = Math.max(0, 1 - (position/100));
Это, как и другие комментаторы предположили, однако, будет приводить к непрозрачности достигая 0 после прокрутки 100px.
var doc = document.documentElement;
window.onscroll = function() {
var value = window.scrollY/(doc.offsetHeight - doc.clientHeight);
document.getElementById("preview").style.opacity = 1 - value;
}body {
height: 1000px;
}
#container {
background: linear-gradient(45deg, #eee 25%, transparent 26%, transparent 75%, #eee 76%), linear-gradient(-45deg, #eee 25%, transparent 26%, transparent 75%, #eee 76%);
background-color: #444;
background-size: 10px 10px;
position: fixed;
width: 100px;
}
#preview {
height: 100px;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="preview"></div>
</div>
вам нужно найти высоту прокруткой, и разделить 'значение scrollTop' на эту величину, чтобы получить процент. Я сделал что-то подобное в этом ответе - http://stackoverflow.com/questions/42259544/image-motion-when-scrolling-using-jquery/42288000#42288000 –
Я не понимаю, зачем мне нужна другая переменная ... I просто нужно преобразовать 1 к 1, 2 к .99, 3 к .98 и т. д. Зачем мне нужна другая переменная. Разве я не могу это сделать с чистой математикой? – JordanBarber
Я только что ответил, что это одно и то же! Если вы хотите посмотреть здесь, ссылка: http://stackoverflow.com/a/42354638/6647153! –