Вот моя проблема:
Это простой div на тихом сложном веб-сайте.Панель находится в самом низу и находится прямо перед формой.
По сути, я пытаюсь воссоздать эффект:
Когда пользователь попадет на саму страницу, как толькокогда он прокручивается до дна, в самом низу появляется боковая панель:
div {
position: fixed;
left:0;
right:0;
bottom:0;
z-index:0
}
Легкие вещи, плюс они будут запущены при полной загрузке документа.
Что я пытаюсь сделатьЭто происходит потому, что, когда пользователь будет прокручивать исходную позицию div (первоначально панель находится прямо перед формой), этот div будет переключать позицию в начальную, и он будет привязан к форме, так что пользователь будет иметьсоздается впечатление, что div никогда не менял свою позицию.
Вот мой код:
HTML:
<section class="container-fluid contact-banner">
<ul>
<li><a href="#">
<picture>
<source srcset="/wp-content/themes/wpboot/images/webp/PHONE.webp" type="image/webp">
<source srcset="/wp-content/themes/wpboot/images/PHONE.png" type="image/png">
<img src="/wp-content/themes/wpboot/images/PHONE.png">
</picture>1-855-502-2288
</a></li>
<li><a href="#">
<picture>
<source srcset="/wp-content/themes/wpboot/images/webp/i.webp" type="image/webp">
<source srcset="/wp-content/themes/wpboot/images/i.png" type="image/png">
<img src="/wp-content/themes/wpboot/images/i.png">
</picture>Request Info
</a></li>
</ul>
</section>
jQuery:
var window_height = $(window).outerHeight();//window height
var phoneBanner_position = $('.contact-banner').offset().top;//position of the element height
var phoneBanner = $('.contact-banner');//the element
var contact_banner = $('.contact-banner').outerHeight();//the height of the element
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;//height on scroll
if(y_scroll_pos > phoneBanner_position-window_height) {//if the value of the scroll will reach the element
phoneBanner.removeClass('fixed-banner');//remove fixed position
} else {
phoneBanner.addClass('fixed-banner');//add fixed position
}
});
css имеет важное значение:
.fixed-banner {
position: fixed;
bottom: 0;
}
Код на самом деле работает, но в этом смысле отладку действительно сложно.Эффект сработает на несколько пикселей, прежде чем браузер коснется самого нижнего элемента, и мне потребовалось несколько раз, чтобы понять, почему.К сожалению, я не могу использовать фиксированное значение, потому что окно будет меняться в зависимости от размера окна (сайт отзывчивый).
Мне интересно, была ли у кого-то такая же проблема в прошлом.
Спасибо