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

Тема в разделе "JavaScript", создана пользователем Nei, 2 июл 2014.

Модераторы: ZiX
  1. Nei

    Nei Nosce te ipsum

    Регистр.:
    5 сен 2009
    Сообщения:
    616
    Симпатии:
    488
    Может кто подскажет как реализуется всплывающее окно, которое появляется при скролле в самый низ страницы.
    Вот пример Перейти по ссылке
     
  2. kir9-molodoi

    kir9-molodoi

    Регистр.:
    31 май 2014
    Сообщения:
    251
    Симпатии:
    79
    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>, счас код поправил
     
    Последнее редактирование: 2 июл 2014
    Nei нравится это.
  3. Ewgi

    Ewgi Создатель

    Регистр.:
    26 сен 2014
    Сообщения:
    12
    Симпатии:
    1
  4. Whitechapel63

    Whitechapel63 Писатель

    Регистр.:
    22 окт 2014
    Сообщения:
    1
    Симпатии:
    0
    Здравствуйте, подскажите где и как настроить крепление определенных новостей в каруселе сайта: Перейти по ссылке.