Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Пермещение картинки при прокрутки скроллинга

Автор: Noodly 12.9.2009, 20:21

Помогите пожалуйста, умные люди!
Мне нужно, чтоб картинка всегда отображалась в углу экрана, даже при прокрутке скроллинга.
Вот написал код, но картинка опускается в угол только при загрузке страницы.

Код


<img id="myimg" src="./img/CERT_2.gif" STYLE ="position:absolute">

<script>
function init_move(){
setInterval("move()",1)
move()
}

function move(){
document.all.myimg.style.bottom=0;
}

init_move()
</SCRIPT>

Подскажите, что не так.

Автор: Amphiluke 12.9.2009, 21:15

На выбор:

1. Без скриптов (не будет работать в IE6).

Код


<img id="myimg" src="./img/CERT_2.gif" style="bottom: 0px; position: fixed; z-index: 1000;">

2. Со скриптом (работает везде, но может неприятно мерцать)

Код


   <img id="myimg" src="./img/CERT_2.gif" style="bottom: 0px; position: absolute; z-index: 1000;">
   <script type="text/javascript">
      var im = document.getElementById("myimg");
      var initTop = im.offsetTop;
      function bottomImg() {
         im.style.top = (initTop + document.documentElement.scrollTop).toString() + "px";
      }
      window.onscroll = bottomImg;
   </script>

Добавлено через 7 минут и 1 секунду
Кстати, может понадобиться явное указание размеров картинки. Например:

Код


<img id="myimg" src="./img/CERT_2.gif" alt="" width="100" height="100" style="bottom: 0px; position: absolute; z-index: 1000;">

Автор: Noodly 12.9.2009, 21:36

Спасибо, но код для IE6 работает неправильно. При первой прокрутке скролла, картинка оказывается в самом верху, а не внизу экрана и оттуда не двигается с места.

Автор: Amphiluke 12.9.2009, 21:40

Вы, видимо, что-то сделали не так. smile

Второй вариант работает в IE6 — только что проверил. Покажите, как делаете.

Автор: Noodly 12.9.2009, 22:18

Картинка, которая должна всегда быть в углу экрана это картинка ISO 9001. При загрузке страницы, она на нужном месте и должна всегда быть там, даже при при прокрутке скроллинга. Ваш код в хтмл я отделил пробелами.

Автор: Amphiluke 12.9.2009, 23:37

Проблема довольно неприятная. Во-первых, по-видимому, из-за отсутствия DOCTYPE (или по другим причинам) на вашей странице вместо

Код


document.documentElement.scrollTop

надо использовать

Код


document.body.scrollTop

Но это полбеды. Пока не загрузится рекламка в правом верхнем углу, свойства изображения (offsetTop) не прочитываются правильно и управлять из скрипта положением картинки не удается! Остается только ждать окончания загрузки документа и уже тогда назначать обработчик события onscroll smile

Код


 <img id="myimg" src="./img/CERT_2.gif" alt="" width="150" height="150" style="bottom: 0px; position: absolute; z-index: 1000">
   <script type="text/javascript">
      var im;
      var initTop;
      function initVars() {
      im = document.getElementById("myimg");
      initTop = im.offsetTop;
      im.style.bottom="0px";
      window.onscroll = bottomImg;
      }
      function bottomImg() {
         im.style.top = (initTop + document.body.scrollTop).toString() + "px";
      }
      window.onload=initVars;
   </script>

Пока реклама не загрузится, картинка будет ползать при скроллинге... А потом будет всё как положено.

Автор: Noodly 13.9.2009, 00:20

Да! Большое спасибо, все работает! smile

Единственное, когда сворачиваешь страницу в окно и крутишь скроллинг, картинку невозможно догнать))
Можно ли поставить какое-то ограничение, чтоб картинка, когда весь текст прокручен, останавливалась за сантиметр до конца экрана?

В любом случае спасибо!