Форум

ruslan_mart · #1 (**permalink**) 03.06.2013, 15:16

Здравия всем, уважаемые пользователи форума!
Прошу помощи в непростой задачке!

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

<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 = ??????
}

рони · #2 (**permalink**) 03.06.2013, 16:29

Ruslan_xDD,
Вариант для Google Chrome ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
 body{
   height: 800px
 }

  </style>
</head>
<body>
<img alt="" src="http://pulson.ru/wp-content/uploads/2011/05/1286214958_94-695x990.jpg" id="bg" style="position:fixed; left:0%; top:0%; width:100%; z-index:-10" />
<script>
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.top = -(bgHeight - height)*(a/(scrollHeight-height)) +"px"
}

</script>
</body>
</html>

ruslan_mart · #3 (**permalink**) 03.06.2013, 17:10

рони, спасибо за формулу, везде работает

window.onscroll = function()
{
	var a = document.documentElement.scrollTop || document.body.scrollTop;
	bg.style.marginTop = -(bgHeight - height)*(a/(scrollHeight-height))+'px'
}

Форум

Справочник

Discord чат

Курсы javascript