Como mover a barra de navegação à esquerda ao rolar em HTML

Escrito por kevin lee | Traduzido por aline fernandes martins
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como mover a barra de navegação à esquerda ao rolar em HTML
O mouse do computador pode mover mais do que a barra de rolagem do navegador (Hemera Technologies/AbleStock.com/Getty Images)

Se a sua página possui uma barra de navegação que contém links e informações importantes, deixe-a visível fazendo com que ela se mova conforme os usuários usam a barra de rolagem. O JavaScript faz esse efeito intrigante ser possível. Cada navegador possui uma propriedade HTML especial que contém a posição exata da sua barra de rolagem vertical. Sincronize o movimento da barra de navegação com o movimento da barra de rolagem do visitante usando o JavaScript.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o documento da página da web, e vá para a seção "<body>" do documento: Encontre o bloco de código que você escreveu que cria a barra de navegação.

  2. 2

    Adicione a seguinte tag div antes do bloco de código:

    <div id = "navBar1">

  3. 3

    Cole "</div>" -- sem as aspas -- depois do bloco de código. Quando estiver feito, o código que cria a sua barra de navegação irá existir dentro de um bloco div, similar ao exemplo mostrado abaixo:

    <div id = "navBar1"> CÓDIGO DA BARRA DE NAVEGAÇÃO AQUI </div>

    O texto "CÓDIGO DA BARRA DE NAVEGAÇÃO AQUI" representa o bloco de código que gera a barra de navegação.

  4. 4

    Adicione o seguinte código JavaScript na seção "<head>" do documento:

    var navBarID = "navBar1"; var bodyObject; var navBarObject;

    window.onload = function () { var bodyObject = document.getElementsByTagName('body')[0]; var navBarObject = document.getElementById(navBarID); navBarObject.style.position = "absolute";

    window.onscroll = function () { scrollObject(bodyObject, navBarObject); } }

    A variável navBarID guarda o "id" da div que você adicionou na seção <body>. O evento window.onload chama uma função que monta um evento window.onscroll. A declaração window.onscroll faz a função JavaScript chamada "scrollObject" ser executada toda vez que você move a barra de rolagem do navegador.

  5. 5

    Cole a função JavaScript abaixo do código do passo anterior:

    function scrollObject(bodyObject, navBarObject) { var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop; navBarObject.style.top = (scrollPosition + 100) + "px"; }

    Esse código cria a função scrollObject. Ele pega a posição vertical atual da barra de rolagem e a armazena na variável scrollPosition. A declaração final define a posição do topo da div que contém a sua barra de navegação para o valor armazenado no scrollPosition. Isso faz a barra de navegação se mover sempre que o valor do scrollPosition mudar.

  6. 6

    Salve o documento HTML e abra-o no navegador. Role a sua página para baixo. A barra de navegação se move conforme a tela desce.

Dicas & Advertências

  • O valor do "id" da div que rodeia a sua barra de navegação é “navBar1”. Você pode usar qualquer nome que desejar para essa div. Se mudar o nome, mude o valor atribuído à variável navBarID usada no código JavaScript.
  • Faça outros objetos se moverem, como imagens e até vídeos, rodeando esses objetos com as tags div de abertura e fechamento, conforme descrito nesses passos.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível