Не нравятся результаты поиска? Попробуйте другой поиск!

Как реализовать липкий div для адаптивной вёрстки?


     29.01.2016    Стили (CSS), jQuery    678

вопрос
Суть задачи ясна в вопросе. переставил все скрипты и все решения которые смог найти в интернете, но на моей вёрстке это дело не работает. Возможно из-за адаптивной вёрстки. Я не кодер, поэтому то что умел перепробовал и решил обратится к специалистам. Собственно нужен липкий блок, наверное правильнее будет такое реализовать на js. нужно чтобы блок появлялся, когда скрилинг достигнет допустим 800px, и как-то останавливать его при достижении футера, то есть условных 500px с низу.

Повторюсь, перепробовал решения которые есть в интернете. Заранее спасибо за помощь

Как реализовать липкий div для адаптивной вёрстки?

Ответа пока нет


Комментарии пользователей (1)

redissx
1

49 | 19

redissx - 29 января 2016 17:54 - Юзер

Нет универсального решения "вставил-работает".
Вот, делал как-то, выложу, может пригодится кому

$(window).load(function(){
    
        var $rightRkl = $('#rkl-right');
        var $wrap = $('#rkl-start');
        var $wrapH = $wrap.height();
        
    if ($(window).width() > 1220) {
        var $heightRight = $rightRkl.height();
        $rightRkl.wrap("<div style='height:"+ $heightRight +"px'></div>");
        var $fixRight = $rightRkl.offset().top;
        var $rklStop = $('#rkl-stop').offset().top - $heightRight - 20;
        $topPos = $wrapH-$heightRight-20;
        $(window).scroll(function() {
            if ($(this).scrollTop() > $fixRight){  
                $rightRkl.addClass("fixed-top");
                if ($(this).scrollTop() > $rklStop){  
                    $rightRkl.addClass("absolute-top").css({
                        'top' : $topPos
                    });
                  }
                  else{
                    $rightRkl.removeClass("absolute-top").css({
                        'top' : '0'
                    });
                };
              }
              else{
                $rightRkl.removeClass("fixed-top");
              };
        });
    };
    
});


.fixed-top {position:fixed; top:0; width:275px; margin-bottom:0;}
.absolute-top {position:absolute; width:275px;}
#rkl-start {position:relative;}


#rkl-right - блок рекламы.
#rkl-start - колонка с рекламой.
#rkl-stop - футер.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы