инвестиционный проект

Фиксируем рекламный блок в боковой колонке с помощью JS

Тема в разделе "Сайтостроение: общий форум", создана пользователем Admin, 13 Сентябрь 2017.

Реклама
  1. Admin

    Admin Команда форума АДМИНИСТРАТОР

    Сообщения:
    187
    Симпатии:
    30
    Пол:
    Мужской
    Сайт:
    Для того, чтобы зафиксировать блоки или один блок в области экрана при прокрутке страницы, на поможет данный скрипт:

    Фиксируем рекламный блок в боковой колонке с помощью JS


    Находим свой блок который вы хотели бы зафиксировать и вокруг кода добавляем тег div вот так:


    Код:
    <div id="fixblock">тут должен быть ваш код нужного вам блока</div>
    Чтобы дальше в скрипте идентифицировать блок, ему установлен атрибут id со значением fixblock.

    Теперь нужно добавить код скрипта, который будет фиксировать блок на странице при прокрутке.
    Для этого копируем код ниже (помним про значение id) и добавляем его перед закрывающим тегом </body>

    PHP:
    <script type="text/javascript">
    function 
    getTopOffset(e) {
        var 
    0;
        do { 
    += e.offsetTop; } while (e.offsetParent);
        return 
    y;
    }
    var 
    block document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
    if ( null != block ) {
        var 
    topPos getTopOffsetblock );
        
    window.onscroll = function() {
            var 
    newcss = (topPos window.pageYOffset) ?
                
    'top:20px; position: fixed;' 'position:static;';
            
    block.setAttribute'style'newcss );
        }
    }
    </
    script>
    Сохраняем и проверяем как все работает.

    Вариант с точно указанной высотой (подставьте свои значения в пикселах):

    PHP:
    <script type="text/javascript">
    function 
    getTopOffset(e) {
        var 
    0;
        do { 
    += e.offsetTop; } while (e.offsetParent);
        return 
    y;
    }
    var 
    block document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
    if ( null != block ) {
        var 
    topPos getTopOffsetblock );

        
    window.onscroll = function() {
            var 
    scrollHeight Math.maxdocument.documentElement.scrollHeightdocument.documentElement.clientHeight),

                
    // высота рекламного блока
                
    blockHeight 400,

                
    // высота подвала
                
    footerHeight =  500,

                
    // считаем позицию, до которой блок будет зафиксирован
                
    stopPos scrollHeight blockHeight footerHeight;

            var 
    newcss = (topPos window.pageYOffset) ?
                
    'top:20px; position: fixed;' 'position:static;';

            if ( 
    window.pageYOffset stopPos )
                
    newcss 'position:static;';

            
    block.setAttribute'style'newcss );
        }
    }
    </
    script>
    Вариант с автоматическим определением вычислением высоты зафиксированного блока и подвала (замените id подвала на свой):

    PHP:
    <script type="text/javascript">
    function 
    getTopOffset(e) {
        var 
    0;
        do { 
    += e.offsetTop; } while (e.offsetParent);
        return 
    y;
    }
    var 
    block document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
    if ( null != block ) {
        var 
    topPos getTopOffsetblock );

        
    window.onscroll = function() {
            var 
    scrollHeight Math.maxdocument.documentElement.scrollHeightdocument.documentElement.clientHeight),

                
    // определяем высоту рекламного блока
                
    blockHeight block.offsetHeight,

                
    // вычисляем высоту подвала, footer заменить на значение атрибута id подвала
                
    footerHeight document.getElementById('footer').offsetHeight,        

                
    // считаем позицию, до которой блок будет зафиксирован
                
    stopPos scrollHeight blockHeight footerHeight;

            var 
    newcss = (topPos window.pageYOffset) ?
                
    'top:20px; position: fixed;' 'position:static;';

            if ( 
    window.pageYOffset stopPos )
                
    newcss 'position:static;';

            
    block.setAttribute'style'newcss );
        }
    }
    </
    script>
    В рабочем виде данный код вы можете наблюдать на главной странице нашего форума справа под соц сетями. Теперь ни один посетитель не убежит от рекламы!)

    Всем удачи в сайтостроении!
     

    Понравился пост? Поделись с друзьями!

    Последнее редактирование: 26 Сентябрь 2018
    HyipInvest.net нравится это.
  2. ROFI

    ROFI Профессионал

    Сообщения:
    100
    Симпатии:
    16
    Пол:
    Мужской
    Да да, и ловим бан :e106:
     
    HyipInvest.net нравится это.
  3. Admin

    Admin Команда форума АДМИНИСТРАТОР

    Сообщения:
    187
    Симпатии:
    30
    Пол:
    Мужской
    Сайт:
    Цитата:
    От гугла можно схлопотать, а вот с ЯндексДирект другая ситуация, там можно :t_grozit:
     
    HyipInvest.net нравится это.
  4. Семён

    Семён Команда форума АДМИНИСТРАТОР

    Сообщения:
    1,083
    Симпатии:
    145
    Пол:
    Мужской
    Сайт:
    Цитата:
    На авторитетных сайтах часто видел и от гугл рекламу, которая преследует тебя по всему сайту)
     
Реклама