Ocultar cabeçalhos de páginas da Web que permanecem “presos” no topo ao rolar a tela

Question

Por muito tempo, cabeçalhos que permanecem "presos" no topo da página me incomodaram. Aqui está o exemplo mais recente que encontrei:

Website antes da rolagem:

Websitedepoisderolarumpoucoparabaixo:

(site aqui )

Observe como o cabeçalho bloqueia parte do texto, reduzindo efetivamente o tamanho horizontal do meu navegador.

Estou usando o firefox e descobri que posso ocultar esses cabeçalhos problemáticos usando o elemento inspect e adicionando CSS inline ao elemento, como display: none . Enquanto isso é melhor do que nada e funciona quando eu realmente quero ler um artigo, é muito irritante ter que fazer isso toda vez que eu visito um site. Também estou ciente de que posso usar uma folha de estilos do usuário para criar uma regra permanente para ocultar um elemento de um site específico, mas isso também é algo que eu gostaria de evitar, já que consome muito tempo.

Então, em resumo, minha pergunta é a seguinte: existe uma maneira de automatizar a ocultação de um elemento com um script ou uma maneira de escrever uma User Style Sheet para ocultar consistentemente esses tipos de cabeçalhos?

    

Answer 1

Os cabeçalhos fixos (sem rolagem) estão ficando menos populares a partir de janeiro de 2016, mas se alguém ainda quiser manipular os elementos fixos programaticamente, eles são fáceis de recuperar em JavaScript:

// get Array of all body elements that contain css rule position: fixed
var fixed_elements = Array.prototype.filter.call(
  document.querySelectorAll('body *'),
  function (e) {
    return window.getComputedStyle(e).getPropertyValue('position') === 'fixed'
  }
)

por exemplo. Eu publiquei meu UserScript no GitHub que muda o estilo para position:absolute (mantém o Scroll Away UserScript no GitHub os elementos visíveis, mas eles vão rolar com o resto da página):

• se você já tiver o GreaseMonkey para o Firefox ou TaperMonkey para o Chrome, você pode usar o github link bruto para instalá-lo no _{PS: não se esqueça de editar as páginas incluídas / excluídas conforme necessário ...}

Answer 2

A maneira mais simples de remover esses cabeçalhos e rodapés fixos e irritantes é usar um bookmarklet (veja wikipedia se você não estiver familiarizado com eles).

Crie um favorito comum (por exemplo, arrastando o ícone à esquerda do URL para a barra de favoritos) e edite-o para adicionar o seguinte código como o URL do favorito:

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Agora, ao clicar nesse favorito especial, todos os elementos que não são de rolagem serão removidos de uma página. Na área de trabalho do Chrome você pode mostrar / ocultar a barra de favoritos com Ctr + Deslocar + b (Linux / Windows) ou Comando + Deslocamento + b (Mac).

A vantagem dos bookmarklets é que você não precisa instalar nenhum plugin ou extensão extra.

Além disso, os bookmarklets também funcionam na maioria dos navegadores móveis, o que significa que você pode usá-los para aumentar a área de leitura em seu celular / tablet. No IOS, os bookmarklets funcionam no Safari e no Chrome (o Firefox no IOS atualmente não permite a edição de favoritos).

Em bookmarklets Android são suportados no Chrome, Firefox, Opera e na maioria dos navegadores modernos. A maneira mais rápida de executar um marcador é digitar seu nome na barra de endereço e, em seguida, tocar (em killFixed na captura de tela) quando ele aparecer no menu de sugestão suspensa. Aparentemente, esta é a única maneira de executar um bookmarklet no Firefox e no Chrome para Android. Para o Safari no iOS, você precisa tocar no ícone de favoritos e, quando a lista de favoritos for exibida em um pop-up, toque no seu bookmarklet.

Note que às vezes você pode precisar clicar no bookmarklet repetidamente e pedir que todos os elementos sejam removidos.

    

Answer 3

Você pode usar um plug-in como o Greasemonkey . Em seguida, basta adicionar um pouco de javascript personalizado para editar o css apenas para esse elemento nesse site. Ele deve estar lá novamente na próxima vez que você visitar o site.

    

Answer 4

Eu uso o Element Hiding Helper para o Adblock Plus para me livrar dos tipos de elementos que você descreve (que eu acho que são chamados de elementos "style: fixed"). Especificamente, quando eu quero me livrar de um, eu clico no ícone Adblock Plus na minha barra de ferramentas, selecione "Hide an element" (ou algo parecido - não há Firefox nesta máquina agora) então eu tenho que usar a combinação do mouse e algumas teclas (ou seja, "w" para "alargar seleção", "n" para "seleção estreita", "s" para "sim, esse é o elemento que eu quero me livrar de") para selecionar um elemento, em seguida, interaja com uma caixa de diálogo. Mas uma vez feito isso, o elemento está ausente a cada vez que uso o Firefox para visitar esse site em particular. Eu fiz isso por dezenas de sites, e esconde os elementos que eu disse para esconder.

link

(Eu preferiria um elemento add-on que oculta todos "style: fixed" por padrão e me dá uma maneira de indicar que eu quero um elemento "style: fixed" particular em um determinado site a ser mostrado em vez de escondido, mas eu não sei de nenhum.)

    

Answer 5

Após meses lidando com esse problema através do "inspecionar elemento" do Firefox ou da edição realmente dolorosa dos arquivos do Firefox userChrome / userContent , descobri que Stylish é facilmente a melhor solução para esse problema. Ainda não é automatizado, mas é muito mais rápido do que qualquer outra coisa que eu encontrei e persiste em visitas a sites.

Veja um exemplo:

• Acabei de visitar um link da Hacker News sobre os salários de personagens de TV fictícios. Parece interessante, mas tem um cabeçalho fixo. Oh não!
• Eu verifico o cabeçalho com o inspetor de elemento do Firefox e determino que a classe problemática aqui é navbar_fixed_top , que é usada para tornar o cabeçalho div fixo.
• Eu crio um estilo estiloso muito básico que corrige meu problema. O problema agora está corrigido para todas as visitas futuras a esse domínio.

Estilo elegante:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("salaryfairy.com") {
  .navbar-fixed-top { 
      position: absolute;
  }
}

E agora o cabeçalho fica fora do meu caminho!

Quando tiver mais dados sobre os nomes / div ids de classe típicos para cabeçalhos fixos, procurarei criar um estilo elegante independente do domínio que torne essas classes / ids absolutos por padrão.

    

Answer 6

Esta é uma versão melhorada do código do ccpizza. Corrige um erro em que apenas um elemento de nível superior é removido em vez de todos eles.

javascript:(function(){var%20found=true;while(found){var%20elems=document.body.getElementsByTagName("*");var%20len=elems.length;for(var%20i=0;i<len;i++){found=false;if(window.getComputedStyle(elems[i],null).getPropertyValue('position')=='fixed'){var%20el=elems[i];el.parentNode.removeChild(el);found=true;break;}}}})()