Здравия всем, уважаемые пользователи форума!
Прошу помощи в непростой задачке!
На сайте расположено изображение, которое шириной растягивается на весь экран, а высота всегда больше высоты экрана. Само изображение фиксированное и служит как фон для сайта.
<img alt="" src="/bg.jpg" id="bg" style="position:fixed; left:0%; top:0%; width:100%; z-index:-10" />
Задача следующая:
Нужно при скроллинге сдвигать изображение вверх через margin-top. Но сдвигать нужно так: вычислить высоту изображения, вычислить высоту всей страницы, вычислить высоту окна браузера пользователя и относительно всем этим параметрам сдвигать изображение вверх при скроллинге, и когда страница прокручена до самого низа, то изображение должно быть в самом верху, тоесть например так:
Высота изображения: 1000px, высота окна браузера 800px, и когда прокручена страница в самый низ, то изображение должно быть сдвинуто на 200px вверх, тоесть: margin-top:-200px.
Надеюсь, суть понятна, буду очень благодарен за решение такой задачки, уже вторые сутки голову ломаю, но я не силён в математике.
var height = window.innerHeight; //Высота экрана пользователя
var scrollHeight = document.body.scrollHeight; //Высота всей страницы
var bg = document.getElementById('bg');
var bgHeight = bg.height; //Высота изображения
window.onscroll = function()
{
var a = document.body.scrollTop; //Получаем при каждой прокуртке позицию скроллинга
bg.style.marginTop = ??????
}