Я хочу переписать следующий код так, чтобы он не получает высоту <body>
, а высота элемента я поставил объект, чтобы выполнить функцию:Javascript: целевой конкретный div или элемент?
var img = document.getElementById("logo");
window.onscroll = function() {
var bodyHeight = parseInt(getComputedStyle(document.body).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.body.scrollTop;
var scrollPCT = (scrollTop/(scrollLimit/100))/100;
logo.style.top = bodyHeight * scrollPCT - logo.offsetHeight + "px";
};
Как я могу целевой, скажем, ID, а не document.body
? Я попытался следующие, но он не работает на всех:
var img = document.getElementById("logo");
window.onscroll = function() {
var body = document.getElementById("container");
var bodyHeight = parseInt(getComputedStyle(document.getElementById("container")).height, 10);
var scrollLimit = bodyHeight - window.innerHeight;
var scrollTop = document.getElementById("container").scrollTop;
var scrollPCT = (scrollTop/(scrollLimit/100))/100;
logo.style.top = bodyHeight * scrollPCT - logo.offsetHeight + "px";
};
Нужный эффект связан обратной прокрутки, в котором изображение будет двигаться вниз, как прокрутке вниз, а не вверх, как это обычно бывает.
Можете ли вы объяснить, что желаемый эффект вы хотите достичь? Показать некоторые HTML, CSS и т. Д.? Трудно воспроизвести что-либо с данным JS и полностью понять ваш вопрос ... Вы пытались проверить возвращаемое значение 'scrollPCT'? –
@ Roko Желаемый эффект включает обратную прокрутку, в которой изображение будет перемещаться вниз, когда пользователь прокручивается вниз, а не вверх, как обычно. Хотя приведенный выше код работает для тела, мне просто нужно настроить таргетинг на определенный элемент. – Hex1189