1

Este es mi código, el componente lo tengo en un template no está en el index.html, todo lo muestra correctamente pero por alguna razón el position: fixed; de mi CSS no funciona, alguien tiene alguna idea de por qué?

exampleApp.component('backbuttonComponent', {
    template: '<a id="back-button" ng-href="/"></a>'
  });
#back-button {
  position: fixed !important;
  width: 60px;
  height: 60px;
  bottom: 10px;
  left: 10px;
  border-radius: 50%;
  background: url("../svg/back-button.svg") no-repeat center center;
  background-size: 24px 24px;
  background-color: #3c3f41;
  z-index: 12 !important;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); /* 6dp */
}
<backbutton-component></backbutton-component>

4
  • El CSS funciona correctamente con este HTML: <a id="back-button" ng-href="/"></a>. ¿Se está generando correctamente el HTML?¿Hay errores en el resto del CSS o algún estilo que sobreescriba las propiedades del botón? Si pudieras poner un ejemplo reproduciendo el error sería más fácil buscar una solución.
    – user7176
    Commented el 18 jul. 2016 a las 10:15
  • Este código funciona bien. El error que tienes es otro. Quizás si aportaras más datos se pueda reproducir y darte una solución.
    – devconcept
    Commented el 18 jul. 2016 a las 12:04
  • @devconcept Lo único que no funciona por alguna razón es el position: fixed; lo otro se muestra correctamente. También sucede el error si coloco la etiqueta <a> en el template HTML normalmente sin ningún componente ni nada de eso, pero si lo coloco en el index.html sí funciona el position: fixed; pero de esa forma se quedaría siempre visible, solo quiero que se muestre en ese template específicamente. Commented el 18 jul. 2016 a las 19:12
  • @AdrianoJosué Me parece que lo que te puede estar pasando es que otro estilo esté sobreescribiendo la propiedad position: fixed ya que este es compatible hasta con IE 7. Quizás tengas más de una vez la directiva y esto te traiga problemas porque en html es ilegal tener varios elementos con un mismo id. Sin un ejemplo concreto es imposible saberlo.
    – devconcept
    Commented el 19 jul. 2016 a las 15:35

1 respuesta 1

-2

Colocalo en position:absolute y cada vez que se haga scroll en la pantalla, obtené cuanto se movió con el scroll (var scroll = $(window).scrollTop();) y aumentale/disminuile el atributo bottom sumando/restando ese valor cada vez que se haga scroll en la pantalla:

$("#back-button").css("top", $(window).height() - 10); //Es igual que poner bottom:10px;

var topInicial = $("#back-button").offsetTop();

$(window).scroll(function(){
    scroll = $(window).scrollTop();//Scroll hecho desde 0 hasta la posición actual
    $("#back-button").css("top", topInicial + scroll);
});

Esto no es con angularJs, pero funciona perfectamente.

1
  • Gracias por responder. Tampoco me funciona tu método, no se que sucede :( Commented el 18 jul. 2016 a las 19:03

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.