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

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.