Ребята выручайте!!! Мучаюсь уже какой день. Не могу убрать скачок вначале и в конце у плавающего блока. Понимаю из за чего происходит( из-за смены позиционирования) но не понимаю как исправить.
Получается происходит вот что:(когда я скролю вниз и доскраливаю до необходимого блока он ставит ему позицию 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");
}
});
});
Простой