I have a floating button that follows you up and down to book a service. I also have a form in the footer area. I want the button to disappear when I get to my footer form; how can I do it?
Button code:
<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>
Form code:
<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 -->
You can try with this code:
What we do is that within the scroll event, we see where we are on the site, and depending on that, we change the opacity property of the container, or the element that you want to hide.
If in doubt, look at this example .
What you can do is give your button a lower z-index than the form, what this will do is make it go below the form.
For example:
form{ z-index: 1000; }
.btn-reserve{ z-index: 999; }