TransWikia.com

Como verificar si es visible un elemento al hacer scroll - jquery?

Stack Overflow en español Asked on August 26, 2021

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:

  1. 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:

introducir la descripción de la imagen aquí

  1. Si se cierra primero la notificación de las cookies, el botón ir arriba debe bajar a la altura del form1.

  2. 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 -->
cssdomhtmljquery

One Answer

Problema

el modo de comportamiento propio del fixed hace que ocurran superpociciones que se manejan con la propiedad z-index

Opinión

estás complicando las cosas, lo más fácil que se me ocurre es lo siguiente...

Solución 1

engloba los elementos .scroll-top, .cookies, y los formularios a un div algo como esto

<div class='fixed-bottom'>
  <div class='scroll-top'/><!-- sustituye esto con tu sroll to top -->
  <div class='cookies'/><!-- sustituye esto con tu aviso de cookies -->
  <div class='fourm-n'/><!-- aqui puedes hacer varias cosas desde manipular el innerHTML para que contenga cualquier formulario que quieras o poner uno por uno los formularios apartir de aqui y solo manipulas su Display para ocultarlo o hacerlo visible -->
</div>

de allí solo eliminle a todos los elementos englobados en el div .fixed-bottom la propiedad fixed y cambiala por un position:relative; para que al .scroll-top le puedas hacer un right:0; que lo pega a la derecha, recomiendo el relative para que no vuelvas a tener el problema de superpocición. los elementos que utilizan absolute, al estar anidados en un relative se mueven con respecto al nodo padre por lo que no deberia darte problemas. ** recomiendo esto por que automaticamente te los pondra en el lugar que requieras por el uso de relative en css y el control del display en jquery y no tendras que recalcurar la posicion a de cada uno cada que se haga un cambio.

solucion 2

si lo que quieres es conservar el html tal cual solo tienes que modificar el jquery para que los div se ajusten a una posición determinada, modificando los atributos del css

el siguiente es el pseudo codigo

.scroll-top.bottom = .cookies.height + .fourm.heigh + .fourm.bottom

.cookies.bottom = .fourm.heigh + .fourm.bottom

.fourm.bottom = 0

Answered by jglv on August 26, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP