Как сделать всплывающее окно при скролле вниз страницы

Nei

Nosce te ipsum
Команда форума
Модератор
Регистрация
5 Сен 2009
Сообщения
699
Реакции
611
  • Автор темы
  • Модер.
  • #1
Может кто подскажет как реализуется всплывающее окно, которое появляется при скролле в самый низ страницы.
Вот пример Для просмотра ссылки Войди или Зарегистрируйся
 
js функция
Код:
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        /* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
        var distanceTop = $('#last').offset().top - $(window).height();
     
        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100); 
    });
 
    /* remove the slidebox when clicking the cross */
    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});
</script>

и код html

HTML:
<div id="slidebox" style="right: 0px;">
<a class="close"></a>
<center>
<h3 class="spacing">Like Us on Facebook</h3>
<iframe frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:165px; height:60px;" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F2machines&width=165&height=60&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=261034297392458">
</center>
</div>
<span id="last"></span>

p.s. сразу пропустил спан обязательный <span id="last"></span>, счас код поправил
 
Последнее редактирование:
  • Нравится
Реакции: Nei
Здравствуйте, подскажите где и как настроить крепление определенных новостей в каруселе сайта: Для просмотра ссылки Войди или Зарегистрируйся и ожидаемых: Для просмотра ссылки Войди или Зарегистрируйся.. При добавленни новостей они автоматичестки публикуются и там и там, хочу сделать кнопку типо как "зафикисировать на главной" только для карусели и скоро на сайте. Вот пример сайта: Для просмотра ссылки Войди или Зарегистрируйся.
 
Назад
Сверху