изображения становится scrollabe со страницей

Question

У меня есть код, как это для обслуживания изображения от 3-партийной системы:

var bbimagebannerfile = ""; 

document.write("<a href=\"%%__REDIRECT%%\" target=\"_blank\"><img src=\"" + bbimagebannerfile + "\" border=\"0\" /></a>"); 

Это изображение, расположенное в нижней части страницы. То, что я пытаюсь сделать, - это прокрутить изображение вместе со страницей, когда пользователь достигнет своего положения, а когда пользователь прокрутится вверх, это изображение снова станет статическим. Может ли кто-нибудь помочь мне в этом?

Answer 1

Просто пример:

<div id="fixed-image"></div> 

Если мы предположим, что HTML выше ваше содержание, которое обслуживается. Вы можете добавить этот CSS:

#fixed-image { 
    width: 100%; 
    height: 100px; 
    background-color: red; 
    position: fixed; 
    bottom: 0; 
} 

В вашем случае, вы можете попробовать добавить свойство класса с указанным стилем.

JS Fiddle: http://jsfiddle.net/df6tmLrg/

Другой демо с JavaScript: http://codepen.io/FakeHeal/pen/qEgxKN (codepen, потому что jsfiddle не позволяет document.write)

var bbimagebannerfile = "https://avatars2.githubusercontent.com/u/1038697?v=3&s=460"; 

document.write("<a href=\"%%__REDIRECT%%\" target=\"_blank\" class=\"bottom-fixed\"><img src=\"" + bbimagebannerfile + "\" border=\"0\" width="100" /></a>"); 

И CSS:

.bottom-fixed { 
    width: 100%; 
    height: 100px; 
    position: fixed; 
    bottom: 0; 
} 

UPDATE : Если вы используете jQuery, вы можете использовать .scroll():

var t = $("#fixed-image").offset().top; 

$(document).scroll(function(){ 
    if($(this).scrollTop() > t) 
    { 
     $("#fixed-image") 
     .css('position', 'fixed') //we change the position to fixed 
     .css('top',0); // and the top to zero 
    } else { 
     $("#fixed-image") 
     .css('position', 'static') //we change the position to fixed 
     .css('top',0); // and the top to zero 
    } 
}); 

Вот демо: http://jsfiddle.net/df6tmLrg/2/