Tengo una imagen en el centro de mi página web. Una vez que el usuario se desplaza y la imagen llega a la parte superior de la ventana, intento arreglar la imagen en la parte superior de la página para que se desplace con la página.

Sin embargo, en lugar de pegarse cuando toca la parte superior de la ventana, la imagen está saltando a la parte superior de la página en cuanto el usuario se desplaza. Aunque me gustaría que la imagen permanezca fija en la parte superior mientras el usuario está en la página, ¡permanece fija cuando se actualiza la página!

Parece que no puedo resolver esto, ¡por favor ayuda!

index.html

<img src="./assets/img/logo.png" class="logo" alt="Logo">

style.css

.logo {
   width: 500px;
   display: block;
   position: absolute;
   top: 200px;
   left: 0;
   right: 0;
   margin: auto;
} 

main.js

$(function() {
  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({position: 'fixed', top: '0px'});
    } else {
      $('.logo').css({position: 'absolute'});
    }
  });
});
2
domburford 11 may. 2016 a las 17:19

4 respuestas

La mejor respuesta

Creo que todo lo que necesita hacer es restablecer el valor superior inicial cuando se desplaza hacia abajo:

  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({
        position: 'fixed',
        top: '0px'
      });
    } else {
      $('.logo').css({
        position: 'absolute',
        top: '200px'         // add this to "reset" the top to it's original (that you set in your css)
      });
    }
  });
body {height:2000px;}

#test {
  height: 400px;
  position: relative;
}

.logo {
  width: 500px;
  display: block;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://lorempixel.com/400/200/city/" class="logo" alt="Logo">
</div>
3
Pete 11 may. 2016 a las 14:37

Debe volver a colocar la ubicación original del elemento donde comenzó (después de lo contrario). Una vez que el elemento regrese a position:absolute, debe asegurarse de que su propiedad top regrese a 200px; de lo contrario, mantendrá el valor establecido cuando era fixed, es decir 0.

Vea abajo:

$(function() {
  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({position: 'fixed', top: '0px'});
    } else {
      $('.logo').css({position: 'absolute', top : boxInitialTop+'px'});
    }
  });
});
1
Frits 11 may. 2016 a las 14:31

Tu código funciona.

Solo tiene que restablecer el valor top en la sección else. De esta manera, permanece 0px porque se configuró de esta manera en la sección if.

2
user6292372 11 may. 2016 a las 14:31
$ ( function ()  { 
  var boxInitialTop = $ ( '.logo' ). offset (). top ; 
  $ ( window ). scroll ( function  ()  { 
    if  ( $ ( window ). scrollTop ()  > boxInitialTop )  { 
      $ ( '.logo' ). css ({ position :  'relative' , top :  '0px' }); 
    }  else  { 
      $ ( '.logo' ). css ({ position :  'absolute' }); 
    } 
  }); 
});
0
anas ed 11 may. 2016 a las 14:26