Levar ao topo elemento

[CrazyLOL 2]

Galera to montando um site mobile e gostaria de saber como posso fazer o seguinte configuração...

Ao abrir meu app pretendo adicionar no meio da tela um campo input (sera uma busca) e ao lado um botão "IR".

 

Até ai OK....

 

Porém gostaria que quando o usuario aperta no campo input o mesmo subisse ao topo e abaixo dele mostraria o resultado da busca que o usuário está digitando...

 

Como que seria o css desse campo? como fazer esse deslize... e quando o usuário aperta fora da tela o input voltaria para o local de inicio.

 

Obrigado :D

[Matheus Lucca Carmo 13]

Você pode criar uma classe para quando ele estiver ativo, exemplo:

.active {
  position: fixed;
  top: 0;
}

Dai, na classe dele mesmo, você coloca um CSS Transition, assim:

.search-input {
   -moz-transition: .3s all ease;
   -webkit-transition: .3s all ease;
               transition: .3s all ease
}

Até ai beleza. Como você quer ativar o efeito quando o usuário clicar no seu botão, adiciona um pouco de Javascript.

 

Primeiro, pega teu batão (pela classe ou ID).

var btn = document.querySelector('#button');

Dai, com ele selecionado, no onclick você coloca a classe nele.

 

btn.onclick = function() {
    btn.className += " active";
};