Tengo una notificación de cookies fijada usando position: fixed y bottom: 0 en mi página que se muestra al momento de cargar la página y se puede cerrar al darle "OK", al hacer scroll se muestra un formulario (form 1) que también está fijado con fixed y un botón para ir arriba de la página, pero quedan detrás de la notificación de cookies.
El form 1 desaparece cuando llega a otro formulario igual (form 2) que está en el footer y si se hace un poco de scroll hacia arriba vuelve aparecer el form1. Desaparece completamente el form 1 si se da click en cerrar (x) antes de que llegue al formulario 2 Y el botón de ir arriba baja un poco de su posición.
Me piden:
- que al momento de mostrarse el form 1 y el botón ir arriba, el formulario debe quedar abajo de las cookies y el botón para ir arriba, quede arriba de las cookies. Como lo muestro en la siguiente imagen:
Si se cierra primero la notificación de las cookies, el botón ir arriba debe bajar a la altura del form1.
Si se cierra primero el form 1, la notificación de las cookies vuelva a tener bottom:0 y el botón ir arriba debe bajar a la altura del las cookies.
Estaba tratando de verificar si el form 1 está visible, que las cookies tengan el bottom de la altura de ese form 1 utilizando is(':visible')
y si no que tenga bottom de cero (0), pero veo que no funciona.
Por favor necesito ayuda.
Me gustaría que no haya que cambiar la estructura html, pero si no hay otra opción está bien...
Esto es lo que tengo:
$.fn.isInViewport = function () {
let elementTop = $(this).offset().top;
let elementBottom = elementTop + $(this).outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + $(window).height();
return (elementBottom > viewportTop && elementTop < viewportBottom);
};
let mostrar = true;
$(window).scroll(function() {
if(mostrar) {
//ocultar form 1 cunado llega a form 2
if ($(window).scrollTop() > 100 && !$('#no-sticky-form').isInViewport()) {
$('#sticky-form').fadeIn('slow');
} else {
$('#sticky-form').fadeOut('slow');
}
}
//mostrar y ocultar boton ir arriba al hacer scroll
if ($(window).scrollTop() > 100 ) {
$('.scroll-top').fadeIn();
} else {
$('.scroll-top').fadeOut();
}
});
$('.sticky-footer .btn-close-sticky').click(function() {
$('#sticky-form').fadeOut('slow');
mostrar = false;
//baja boton "ir arriba" al cerrar form 1.
$('.scroll-top').animate({
bottom: '50px'
});
});
//boton ir arriba
$('.scroll-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
//ocultar cookies
$('#btn-ok').click(function() {
$('.cookies').fadeOut();
});
//verificar si es visible form 1 pero no funciona.
if( $('#sticky-form').is(':visible') ) {
console.log('no oculto');
} else {
console.log('oculto');
}
h3 {
margin: 0;
}
#no-sticky-form {
border-top: 1px solid #707070;
border-bottom: 1px solid #707070;
padding-top: 15px;
padding-bottom: 10px;
background-color: lightblue;
}
#no-sticky-form .sticky-footer {
border: 0;
padding: 0;
background-color: transparent;
display:block;
}
.sticky-footer {
border-top: 1px solid #707070;
border-bottom: 1px solid #707070;
padding-top: 15px;
padding-bottom: 10px;
background-color: greenyellow;
display: none;
z-index: 10;
}
.container-items-sticky-footer {
text-align: center;
position: relative;
}
.btn-close-sticky {
width: 20px;
height: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 20px;
}
span {
color: black;
font-size: 20px;
line-height: 52px;
}
.sticky {
position: fixed;
bottom: 0;
width: 100%;
}
.cookies {
background-color: orange;
padding: 18px 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 11;
}
.scroll-top {
position: fixed;
bottom: 109px;
right: 15px;
height: 40px;
width: 40px;
display: none;
z-index: 10;
}
.cookies-description {
display: flex;
margin-right: auto;
margin-left: auto;
justify-content: center;
align-items: center;
padding: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
<br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
<br><br>
consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi delectus beatae minus commodi. Ipsum tenetur nesciunt dolores unde perferendis ab soluta fugit magni at excepturi consectetur, quas voluptatem dolore laboriosam.
</p>
<div id="no-sticky-form">
<div class="sticky-footer">
<div class="container">
<div class="container-items-sticky-footer">
<h3>Form 2</h3>
<p>Lorem ipsum dolor sit a met</p>
</div><!-- /.container-items-sticky-footer -->
</div><!-- /.container -->
</div><!-- /.sticky-footer -->
</div><!-- /.sticky-footer-form -->
<!--SCROLL TOP BUTTON-->
<a href="#0" class="scroll-top" title="Go top">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="0 0 50 50">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_80" data-name="Rectangle 80" width="50" height="50" transform="translate(-525 502)" fill="#fff"/>
</clipPath>
</defs>
<g id="Mask_Group_11" data-name="Mask Group 11" transform="translate(525 -502)" clip-path="url(#clip-path)">
<g id="Group_139" data-name="Group 139" transform="translate(-525.424 502)">
<rect id="Rectangle_35" data-name="Rectangle 35" width="50" height="50" fill="#8bc53f"/>
<path id="Path_16" data-name="Path 16" d="M291.368,704.938,304.907,691.4l13.539,13.539" transform="translate(-279.695 -672.595)" fill="#8bc53f" stroke="#fff" stroke-miterlimit="10" stroke-width="4"/>
</g>
<g id="Group_138" data-name="Group 138" transform="translate(-525.424 502)">
<rect id="Rectangle_35-2" data-name="Rectangle 35" width="50" height="50" fill="#97999c"/>
<path id="Path_16-2" data-name="Path 16" d="M291.368,704.938,304.907,691.4l13.539,13.539" transform="translate(-279.695 -672.595)" fill="#97999c" stroke="#fff" stroke-miterlimit="10" stroke-width="4"/>
</g>
</g>
</svg>
</a><!--scroll-top-->
<!--COOKIES DISCLAIMER-->
<div class="cookies">
<div class="container">
<div class="cookies-description">
<p>Notification cookies</p>
<button id="btn-ok">OK</button>
</div><!--cookies-description-->
</div><!--container-->
</div><!--cookies-->
<!--STICKY FORM-->
<div id="sticky-form" class="sticky-footer sticky">
<div class="container">
<div class="container-items-sticky-footer">
<h3>Form 1</h3>
<p>Lorem ipsum dolor sit a met</p>
<div class="btn-close-sticky">
<span>X</span>
</div><!-- /.close-sticky-footer -->
</div><!-- /.container-items-sticky-footer -->
</div><!-- /.container -->
</div><!-- /.sticky-footer -->