1

Tengo una barra con position fixed en la parte de abajo de mi página que se muestra al hacer scroll y se oculta antes de llegar al hero.

  1. Lo que necesito es que al dar click en CERRAR (boton X) se oculte de forma permanente y ya no se vuelva a mostar al hacer scroll. De momento ese es el problema. se oculta al dar click en X pero cuando hago scroll vuelve a mostrarse.

  2. Lo otro que necesito es que la seccion fixed al llegar a la parte superior de la otra sección de color verde, se oculte si no se ha dado click en cerrar X antes de llegar. Eso no tengo idea de como hacerlo.

La funcionalidad es como la de esta página: sticky-form-bottom

Esto es lo que llevo:

$(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scroll-top').fadeIn('slow');
            $('.sticky-footer').fadeIn('slow');

        } else {
            $('.scroll-top').fadeOut('slow');
            $('.sticky-footer').fadeOut('slow');
        }
    });

    $('.sticky-footer .btn-close-sticky').click(function() {
        $('#sticky-form').fadeOut('slow');
    });
#no-sticky-form {
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    padding-top: 15px;
    padding-bottom: 10px;
  background-color: lightgreen;
}

#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: lightblue;
    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%;
}
<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>Sign up</h3>
                    <p>Never miss an insight. We’ll email you when new articles are published.</p>
                </div><!-- /.container-items-sticky-footer -->
            </div><!-- /.container -->
        </div><!-- /.sticky-footer -->
    </div><!-- /.sticky-footer-form -->
    

<!--STICKY FORM-->
    <div id="sticky-form" class="sticky-footer sticky">
        <div class="container">
            <div class="container-items-sticky-footer">
                <h3>Sign up</h3>
                <p>Never miss an insight. We’ll email you when new articles are published.</p>
                <div class="btn-close-sticky">
                    <span>X</span>
                </div><!-- /.close-sticky-footer -->
            </div><!-- /.container-items-sticky-footer -->
        </div><!-- /.container -->
    </div><!-- /.sticky-footer -->

1 respuesta 1

1

Crea una variable para saber si se tiene que mostrar o no, solo cuando tenga valor verdadero, funcionará con el scroll. Al hacer clic en el botón, pon la variable en falso.

Para el segundo problema, crea una función para analizar si el elemento está visible en pantalla, de forma que el fijo aparezca solo si se hace scroll y la sección verde está fuera de los límites de la pantalla.

Nota: Tomé la función isInvewPort() de esta pregunta.

$.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);
};

// Inicia en verdadero para mostrar al hacer scroll
let mostrar = true;

$(window).scroll(function() {
    // Solo si mostrar es verdadero
    if(mostrar) {
        if ($(window).scrollTop() > 100 && !$('#no-sticky-form').isInViewport()) {
            $('.scroll-top').fadeIn('slow');
            $('#sticky-form').fadeIn('slow');
        } else {
            $('.scroll-top').fadeOut('slow');
            $('#sticky-form').fadeOut('slow');
        }
    }
});

$('.sticky-footer .btn-close-sticky').click(function() {
    $('#sticky-form').fadeOut('slow');
    // Evitar que vuelva a mostrarse al hacer scroll
    mostrar = false;
});
#no-sticky-form {
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: lightgreen;
}

#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: lightblue;
    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%;
}
<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>Sign up</h3>
                    <p>Never miss an insight. We’ll email you when new articles are published.</p>
                </div><!-- /.container-items-sticky-footer -->
            </div><!-- /.container -->
        </div><!-- /.sticky-footer -->
    </div><!-- /.sticky-footer-form -->
    

<!--STICKY FORM-->
    <div id="sticky-form" class="sticky-footer sticky">
        <div class="container">
            <div class="container-items-sticky-footer">
                <h3>Sign up</h3>
                <p>Never miss an insight. We’ll email you when new articles are published.</p>
                <div class="btn-close-sticky">
                    <span>X</span>
                </div><!-- /.close-sticky-footer -->
            </div><!-- /.container-items-sticky-footer -->
        </div><!-- /.container -->
    </div><!-- /.sticky-footer -->

2
  • Muchas Gracias, funciona bien, pero el punto para el segundo problema es que si no se da click en cerrar el bloque fixed, se debe ocultar justo al momento de llegar a la seccion verde. Que no sea necesario dar click para que se vea la seccion verde como está ahora. ;)
    – JoseFranc
    Commented el 16 jul. 2020 a las 20:01
  • 1
    Listo, actualicé la respuesta.
    – Triby
    Commented el 16 jul. 2020 a las 20:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.