Как убрать скачок при смене позиции у плавающего блока?

Ребята выручайте!!! Мучаюсь уже какой день. Не могу убрать скачок вначале и в конце у плавающего блока. Понимаю из за чего происходит( из-за смены позиционирования) но не понимаю как исправить.
Получается происходит вот что:(когда я скролю вниз и доскраливаю до необходимого блока он ставит ему позицию fixed и начинает скролить с этой позицией до самого футера. Когда доскраливает до футера он меняет позицию на absolute. И когда я начинаю скролить вверх он меняет позицию с absolute на fixed) Именно в тот момент когда происходит смена позиционирования происходит неприятный скачок. Как от него избавиться?

<!--begin wrapper3-->
            <div class="wrapper3 cf" data-item="5">
                <div class="butterfly"></div>
                <div class="jellyfish1"></div>
                <div class="jellyfish2"></div>
                <button class="invis_button"></button>
                <!--begin info-left-sec3-->
                <div class="info-left-sec3">
                    <div class="info-logo-sec3">
                        <i><img src="img/triple_str.png" alt="#"></i><span><img src="img/orgpage_item.png" alt=""></span><a href="http://www.orgpage.ru" target="_blank">www.orgpage.ru</a>
                    </div>

                    <div class="big-img-item cf">
                        <img src="img/Orgpage-big.png" alt="#" width="595px">
                    </div>
                </div>
                <!--end info-left-sec3-->

                <!--begin info-right-sec3-->
                <div class="info-right-sec3">
                    <!--begin container-->
                    <div class="container">
                        <!--begin floating-->
                        <div class="floating">
                            <div class="button-up-portfolio">
                                <span class="roboto_light s20 ">НА ПОРТФОЛИО</span>
                                <button></button>
                            </div>
                            <div class="txt-info-big-item cf">
                                <!--     Начало              information       -->
                                <div class="information">
                                    <h2>OrgPage.ru</h2>
                                    <p>OrgPage это уникальный живой портал, который
                                        <br>который нополняют и создают сами пользователи.
                                        <br>
                                        <br>В день на наш сайт заходит около 100 000 уникальных
                                        <br>посетителей из России и стран СНГ.
                                        <br>
                                        <br>Каждый из пользователей может просмотреть вакансии
                                        <br>интересующих его компаний, новости, оставить свой отзыв,
                                        <br>напрямую задать вопрос представителю организации, указать на
                                        <br>ошибку в данных организации и многое другое.
                                        <br>Присоединяйтесь!
                                    </p>
                                </div>
                                <!--        Конец           information       -->
                                <i><img src="img/triple_str.png" alt="#"></i>
                                <a href="#" data-item="1" class="button-info-sec3_1"></a>
                                <a href="#" data-item="2" class="button-info-sec3_2"></a>
                                <a href="#" data-item="3" class="button-info-sec3_3"></a>
                                <a href="#" data-item="4" class="button-info-sec3_4"></a>
                                <a href="#" data-item="5" class="button-info-sec3_5"></a>
                            </div>
                        </div>
                        <!--begin floating-->
                    </div>
                    <!--ENDcontainer-->
                </div>
                <!--end info-right-sec3-->
            </div>
            <!--end wrapper3-->
        </div>

$(function () {
        //        var topPos = $('.floating').offset().top;
        $(window).scroll(function () {
            var top = $(document).scrollTop(),
                pip = $('#section4').offset().top, //расстояние до подвала от верха окна браузера
                sec3 = $('#section3').offset().top, //расстояние до 3 секции от верха окна браузера
                height = $('.floating').outerHeight(); //получаем значение высоты пл.блока
            if (top > sec3 && top < pip - height) {
                $('.floating').addClass('fixed').removeAttr("style");
            } else if (top > pip - height) {
                $('.floating').removeClass('fixed').css({
                    'position': 'absolute',
                    'bottom': '20' + 'px',
                    //					'right': '0'
                });
            } else {
                $('.floating').removeClass('fixed').removeAttr("style");
            }
        });
    });