Код: http://codepen.io/anon/pen/EjrpMMУстановить ширину DIV в зависимости от положения прокрутки
Итак, я работаю над интересной проблемой. Я работаю с HTML-документом 2000px, который имеет модальное размещение на нем.
Ширина лабиринта div составляет 80%, и он сидит неподвижно.
Целью является прокрутка страницы для управления шириной div в зависимости от положения прокрутки. В нижней части страницы он занимает лишь третью часть.
У меня возникли проблемы с выяснением правильного уравнения или формулы для этого, и он искал помощи.
В настоящее время я пытаюсь посмотреть на window.pageYOffset, чтобы добавить 2,5% к div при увеличении, и минус 2,5% при прокрутке назад, чтобы вернуть его на 80% ширины.
Однако, что-то не работает правильно. Я видел, есть ли у сообщества какие-либо идеи, чтобы помочь решить проблему.
Я не использую никаких фреймворков для этого.
Вот мой JavaScript:
var lightBox = document.getElementById('lightBox'),
count = 80,
num = window.pageYOffset;
document.addEventListener('scroll', function(e) {
var offset = window.pageYOffset;
num >= offset ? count += 2.5 : count -= 2.5;
num = offset;
lightBox.style.width = count + '%';
});
Посмотреть код здесь, в этом codepen
http://codepen.io/anon/pen/EjrpMM
Спасибо!
Так что вы хотите, когда вы прокрутите вверх, ваша ширина будет 80%? –
Правильно, он начинается с 80%. Когда вы перейдете к нижней части, это будет 3-й из этих размеров. При прокрутке вверх, он изменяется до 80%. –