2

¿Cómo puedo hacer que mi imagen cambie de tamaño al bajar el scroll? Este es el código.

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset= "UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Estilos.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <scrip src="index.js"></script>
</head>
<body>
    <header>
        <form method="get" action="https://www.google.com/search">
        <input type="text" name="q" size="15" maxlength="255" value="buscar" />
        </form>

         <center>
         <img src="logoModoRock-03.png" width="80" height="80">
         </center>

    </header>

</body>
</html>

Código CSS:

*{margin: 0; padding: 0;}

body{
    background: #fffffa;
}

header{
    width: 100%;
    overflow: hidden;
    background: #252932;
}
header{
     position: fixed;
     height:100px;
}
2
  • 2
    Hola @Rigoberto, necesitas mostrar algo de iniciativa al momento de publicar una pregunta, qué has intentado ? que problemas te has encontrado ? Pequeño tip, deberías investigar el evento scroll para javascript(quizá con jquery)
    – learnercys
    Commented el 25 abr. 2016 a las 17:42
  • @Rigoberto Lo que estás intentando es que la imagen crezca cuando bajas el scroll y que tome su posición original cuando llega al tope?
    – devconcept
    Commented el 25 abr. 2016 a las 18:08

1 respuesta 1

1

Para lograr esto necesitas añadir algo de código javascript en el evento scroll y con esta información asignar una clase en particular que modifique las propiedades del objeto.

Ejemplo:

CSS

.newClass {
  height: 60px;
}

Javascript

$document.scroll(function() {
  $(".title").toggleClass(newClass, $document.scrollTop() >= 50);
});

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.