0

Hide the button

Tengo un botón flotante que te sigue al subir y al bajar para reservar un servicio. También tengo un formulario en el área del footer. Quiero desaparecer el botón al llegar a mi formulario del footer; ¿como puedo hacerlo?

Código del botón:

<a class="et_pb_button et_pb_custom_button_icon et_pb_button_16 et_pb_bg_layout_light" href="#form" data-icon="">RESERVAR</a>

Código del Form:

            <div class="et_pb_contact">
                <form class="et_pb_contact_form clearfix" method="post" action="http://pasionxeuropa.mx/landing-lo-mejor-de-europa/">
                    <p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last" data-id="nombre" data-type="input">


            <label for="et_pb_contact_nombre_1" class="et_pb_contact_form_label">Nombre</label>
            <input type="text" id="et_pb_contact_nombre_1" class="input" value="" name="et_pb_contact_nombre_1" data-required_mark="required" data-field_type="input" data-original_id="nombre" placeholder="Nombre">
        </p><p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_last" data-id="correo" data-type="email">


            <label for="et_pb_contact_correo_1" class="et_pb_contact_form_label">Correo</label>
            <input type="text" id="et_pb_contact_correo_1" class="input" value="" name="et_pb_contact_correo_1" data-required_mark="required" data-field_type="email" data-original_id="correo" placeholder="Correo">
        </p><p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_last" data-id="telefono" data-type="input">


            <label for="et_pb_contact_telefono_1" class="et_pb_contact_form_label">Teléfono </label>
            <input type="text" id="et_pb_contact_telefono_1" class="input" value="" name="et_pb_contact_telefono_1" data-required_mark="required" data-field_type="input" data-original_id="telefono" placeholder="Teléfono " pattern="[0-9]{1,10}" title="Only numbers allowed.Minimum length: 1 characters. Maximum length: 10 characters." maxlength="10">
        </p><p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_half" data-id="adultos" data-type="select">


            <label for="et_pb_contact_adultos_1" class="et_pb_contact_form_label">Adultos</label>
            <select id="et_pb_contact_adultos_1" class="et_pb_contact_select input" name="et_pb_contact_adultos_1" data-required_mark="required" data-field_type="select" data-original_id="adultos">
                    <option value="">Adultos</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
                </select>
        </p><p class="et_pb_contact_field et_pb_contact_field_4 et_pb_contact_field_half et_pb_contact_field_last" data-id="menores" data-type="select">


            <label for="et_pb_contact_menores_1" class="et_pb_contact_form_label">Menores</label>
            <select id="et_pb_contact_menores_1" class="et_pb_contact_select input" name="et_pb_contact_menores_1" data-required_mark="required" data-field_type="select" data-original_id="menores">
                    <option value="">Menores</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
                </select>
        </p><p class="et_pb_contact_field et_pb_contact_field_5 et_pb_contact_field_last" data-id="mensaje" data-type="text">


            <label for="et_pb_contact_mensaje_1" class="et_pb_contact_form_label">Mensaje.....</label>
            <textarea name="et_pb_contact_mensaje_1" id="et_pb_contact_mensaje_1" class="et_pb_contact_message input" data-required_mark="required" data-field_type="text" data-original_id="mensaje" placeholder="Mensaje....."></textarea>
        </p>
                    <input type="hidden" value="et_contact_proccess" name="et_pb_contactform_submit_0">
                    <input type="text" value="" name="et_pb_contactform_validate_0" class="et_pb_contactform_validate_field">
                    <div class="et_contact_bottom_container">

        <div class="et_pb_contact_right">
            <p class="clearfix">
                <span class="et_pb_contact_captcha_question">10 + 8</span> = <input type="text" size="2" class="input et_pb_contact_captcha" data-first_digit="10" data-second_digit="8" value="" name="et_pb_contact_captcha_0" data-required_mark="required">
            </p>
        </div> <!-- .et_pb_contact_right -->
                        <button type="submit" class="et_pb_contact_submit et_pb_button">Contáctanos</button>
                    </div>
                    <input type="hidden" id="_wpnonce-et-pb-contact-form-submitted" name="_wpnonce-et-pb-contact-form-submitted" value="ff806da4bb"><input type="hidden" name="_wp_http_referer" value="/landing-lo-mejor-de-europa/">
                </form>
            </div> <!-- .et_pb_contact -->
2
  • Hola Ricardo. Por favor publica tu código fuente, incluyendo el archivo html, esto con el fin de ayudarte de la mejor manera y encontrar una solución optima a lo que necesitas. el 16 oct. 2018 a las 19:38
  • veo que puedes usar jquey es facil de hacerlo, pero como dice el amigo Ricardo pon tu codigo para darte la mejor respueta.
    – Gabriela
    el 16 oct. 2018 a las 19:44

2 respuestas 2

2

Puedes intentar con este código:

$(window).on('scroll', function () { // Evento de Scroll
  if (($(window).scrollTop() + $(window).height()) == $(document).height()) { // Si estamos al final de la página
      $('.ocultar').stop(true).animate({ // Escondemos el elemento
          opacity: 0
      }, 250);
  } else { // Si no
      $('.ocultar').stop(true).animate({ // Mostramos el elemento
          opacity: 1
      }, 200);
  }
});

Lo que hacemos es que dentro del evento scroll, vemos en qué lugar del sitio estamos, y según eso, cambiamos la propiedad opacity del contenedor, o del elemento que quieras ocultar.

Si tienes dudas, mira este ejemplo.

4
  • Si que funciona! Muchas gracias. Disculpa, si quiero esconderlo a la altura del form, (son como 10 centimetros arriba) como puedo hacerle? Muchas gracias, sino ahorita le muevo para ubicar la solución mas exacta, lo agradezco mucho! el 16 oct. 2018 a las 20:20
  • Algo raro extra, en móvil no funciona. el 16 oct. 2018 a las 20:39
  • Para modificar la altura cambia esta parte del código if (($(window).scrollTop() + $(window).height()) == $(document).height()) { por if (($(window).scrollTop() + $(window).height() + 200 ) >= $(document).height()) { donde el número 200 aquí son cuantos píxeles antes tiene que esconderse el botón. Mira este ejemplo: jsfiddle.net/JCAguilera/rothkL81/4 (Modifica el valor de la variable 'pixelesArriba')
    – JCAguilera
    el 16 oct. 2018 a las 21:04
  • Por lo del móvil puedes intentar esta solución (inglés): stackoverflow.com/questions/25633324/… Básicamente cambia el evento $(window).on('scroll', function () { por este $(document).on('scrollstart', function(){
    – JCAguilera
    el 16 oct. 2018 a las 21:07
0

Lo que puedes hacer es darle a tu botón un z-index inferior al del form, esto lo que hará es que pase por abajo del form.

Por ejemplo:

form{ z-index: 1000; }

.btn-reserva{ z-index: 999; }

2

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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