Установить ширину DIV в зависимости от положения прокрутки

Question

Код: http://codepen.io/anon/pen/EjrpMM

Итак, я работаю над интересной проблемой. Я работаю с 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

Спасибо!

Answer 1

Вы просто должны изменить

+= 2.5 and -=2.5 to += 0.7 and -= 0.7 

Когда я проверил свой код, который я сделал это, и она работала.

Answer 2

Прокрутить одноименное событие прокрутки независимо от того, сколько вы прокрутили. Например. если вы прокрутили полосу прокрутки 1px или прокрутили 100px, используя событие прокрутки мыши, будет запущено один раз.

Так что если вам нужны стабильные результаты, вам нужно будет рассчитать свою ширину div в зависимости от положения прокрутки (window.pageYOffset).

Проверьте это codepen fork. Я предположил, что в конце страницы должно быть 50%.

Основная часть:

var lightBox = document.getElementById('lightBox'); 
var upperBound = 80; 
var lowerBound = 50; 

var tickValue = (upperBound - lowerBound)/window.innerHeight; 

document.addEventListener('scroll', function(e) { 
    var offset = window.pageYOffset; 
    var count = upperBound - offset * tickValue; 

    lightBox.style.width = count + '%'; 
}); 

Важное примечание: для Crossbrowser способ получить innerHeight вы можете проверить this answer

Answer 3

Это простое уравнение. Пусть f : scroll |-> f(scroll) будет функцией, которая дает вам ширину вашего div. Вы хотите f(0) = 0.8, f(2000)= 1/3.

Предположим, вы хотите, чтобы прогрессия была линейной, поэтому f(scroll) = a*scroll + b, вы можете легко вывести, что b = 0.8 и a = (1/3 - 0.8)/2000 = -0.000233. Теперь для любого значения прокрутки вы можете найти ширину своего div.

Теперь вы можете изменить значения, если хотите, f(scroll) = (minWidth-maxWidth)/pageLength * scroll + maxWidth.