2014-10-11 3 views
0

Я хочу переписать следующий код так, чтобы он не получает высоту <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"; 
}; 

Нужный эффект связан обратной прокрутки, в котором изображение будет двигаться вниз, как прокрутке вниз, а не вверх, как это обычно бывает.

+0

Можете ли вы объяснить, что желаемый эффект вы хотите достичь? Показать некоторые HTML, CSS и т. Д.? Трудно воспроизвести что-либо с данным JS и полностью понять ваш вопрос ... Вы пытались проверить возвращаемое значение 'scrollPCT'? –

+0

@ Roko Желаемый эффект включает обратную прокрутку, в которой изображение будет перемещаться вниз, когда пользователь прокручивается вниз, а не вверх, как обычно. Хотя приведенный выше код работает для тела, мне просто нужно настроить таргетинг на определенный элемент. – Hex1189

ответ

1

Я думаю, что вычисленная высота не работает? Используйте clientHeight свойство:

var bodyHeight = document.getElementById("container").clientHeight; 

(или один из other height properties)

Смежные вопросы