0

Tengo que incorporar a mi web un formulario que se muestre en la parte lateral derecha de la página. Este formulario debe estar oculto, y se debe abrir cuando se haga click en el botón del mismo. He estado mirando por internet, pero no he encontrado ningún ejemplo que me sirva 100%.

Tengo desarrollado el siguiente código, pero no se abre de forma correcta si despliego el formulario cuando hago scroll en la página, en vez de abrirse en el sitio concreto en el que estoy, se abre al principio de la página:

#slider{
  width:500px;
  top:100px;
  position:absolute;
  background-color: #ffffff;
}

#header{ 
  width:342px;
  height:auto;
  position:absolute; 
  right:0px; 
  border:1px solid #d8d8d8;
  margin-left:40px;
  padding:20px 40px;
  border-radius:3px;
  box-shadow: 0 0 8px gray;
  background-color: #ffffff;

}

#sidebar{
  position:fixed;
  top:180px;
  right: 0;
  box-shadow: 0 0 8px gray;
}

#sidebar1{
  position:absolute;
  top:180px;
  left:113px;
  box-shadow: 0 0 8px gray;
}

div#title{
  position:absolute;
  top:300px;
  left:650px;
}

body{
  overflow-x:hidden;
}
<div id="slider" style="right:-342px;">
  <div id="sidebar" onclick="open_panel()">
    <img src="img/contact.png"/>
  </div>
  <div id="header">				
    <h2>Contacto</h2>
    <form name="#" method="#" action="#">
      <div class="input-field col s12">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Nombre</label>
      </div>
      <div class="input-field col s12">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Teléfono</label>
      </div>
      <div class="input-field col s12">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Email</label>
      </div>
      <div class="input-field col s12">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Población</label>
      </div>
      <div class="input-field col s12">
        <textarea id="textarea1" class="materialize-textarea"></textarea>
        <label for="textarea1">Textarea</label>
      </div>
      <a class="waves-effect waves-light btn">button</a>							
    </form>
  </div>
</div>

¿Alguien me puede decir que estoy haciendo mal o tiene el enlace a algún recurso que me pueda servir?

2
  • Acabo de dar con la solución, para que se desplazara como quiero, solamente tenía que cambiar la propiedad "position" del #slider, cambiar absolute, por fixed. Gracias de todas formas ;-)
    – I.Alonso
    Commented el 9 feb. 2017 a las 12:41
  • 6
    Añade eso como respuesta y no como comentario. Después del tiempo requerido, acéptala como respuesta válida, de ese modo podrá servir de ayuda a otros usuarios que se encuentren con el mismo problema.
    – Alvaro Montoro
    Commented el 9 feb. 2017 a las 12:45

1 respuesta 1

1

De comentario por el OP

Acabo de dar con la solución, para que se desplazara como quiero, solamente tenía que cambiar la propiedad "position" del #slider, cambiar absolute, por fixed. Gracias de todas formas ;-)

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.