Repetir algumas rodas seletivamente pode não ser uma coisa ruim. O blog de Aaron adicionou um menu suspenso, que parece ser muito alto. Embora esse tipo de truque não seja a primeira vez que eu o vejo, eu nunca escrevi. Hoje vou escrever seletivamente sobre esta função. A seguir, o processo de desenvolvimento desta roda, que também pode ser considerado como um processo de análise e implementação de um documento de requisitos.
Endereço da demonstração: http://sandbox.runjs.cn/show/to8wdmuy
Download do código -fonte: https://github.com/bjtqti/floatmenu
O primeiro passo é criar uma estrutura de seção DOM:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "Stylesheet" href = "menu.css">
</head>
<Body>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p> O passado pode doer. Mas você pode fugir dele ou aprender com ele </p>
<p> O passado foi doloroso, mas você escapa ou cresce dele </p>
<p> Um encontra seu destino na estrada que ele toma para evitá -lo </p>
<p> Muitas vezes, está a caminho de escapar do destino, mas encontra inesperadamente </p>
<p> As regras devem ser quebradas </p>
<p> As regras devem ser quebradas. </p>
<p> anos pode enrugar a pele, mas para desistir do entusiasmo as rugas da alma. </p>
<p> A passagem do tempo só torna o rosto velho, mas a paixão não faz mais o coração murchar. </p>
<h1 id = "test2"> test2 </h1>
<p> Somente praticando constantemente o conhecimento que você aprendeu, você pode realmente dominá -lo. </p>
<p> Viva todos os dias ao máximo. </p>
<p> Aproveite todos os dias. </p>
<p> Mantenha os olhos nas estrelas e seus pés no chão. </p>
<p> Tenha ambições elevadas e mantenha os pés no chão. </p>
<p> Sempre esteja pronto para uma aventura inesperada. </p>
<p> Vá pronto para iniciar uma aventura inesperada a qualquer momento. </p>
<p> A vida é cheia de decepção. Você não pode se concentrar nas coisas. Você tem que seguir em frente. </p>
<p> A vida geralmente é infeliz, não se entregue ao passado e segue em frente bravamente. </p>
<p> Sou um espírito livre. Eu não posso ser enjaulado. </p>
<p> Minha alma é livre e não deve estar ligada. </p>
<p> Às vezes o coração vê o que é invisível para os olhos. </p>
<p> Aqueles que estão fora de vista podem sentir isso </p>
<p> As coisas simples também são as coisas mais extraordinárias, e apenas os sábios podem vê -las. </p>
<p> A coisa mais comum também é a coisa mais extraordinária, e apenas os sábios o entendem. </p>
<h1 id = "test3"> test3 </h1>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
<p> Quantos xxxxxx </p>
</div>
<div id = "Menubar">
<p> ocultar </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "MENU.JS"> </script>
</html>
O segundo passo é preparar o arquivo CSS:
A cópia do código é a seguinte:
ul {
Tipo no estilo de lista: nenhum;
}
A {
Decoração de texto: Nenhum;
}
/*Área de conteúdo do artigo*/
#contente {
Largura: 400px;
margem: 0 automático;
Size da fonte: 2em;
}
/*Menu flutuante*/
.menu {
Posição: fixado;
topo: 20%;
Direita: 0;
Largura: 200px;
borda: 1px cinza sólido;
Radio de fronteira: 5px;
}
.menu li {
Altura: 2em;
altura de linha: 2em;
}
.vermelho {
Cor: vermelho;
}
.esconder {
Exibir: Nenhum;
}
/*Ocultar menu flutuante*/
.slidein {
Transform: tradutor3d (202px, 0, 0);
Duração da transição: .5S;
}
/*Mostre o menu flutuante*/
.Slideout {
Transform: tradutor3d (0, 0, 0);
Duração da transição: .5S;
}
.stático {
Cor:#007afaf;
Alinhamento de texto: centro;
}
/*Mostre a bola flutuante*/
.toshow {
exibição: bloco;
largura: 4.8em;
Altura: 2em;
altura de linha: 2em;
Radio de fronteira: .5em;
borda: 1px cinza sólido;
Transform: tradutor3d (-5em, 0, 0);
Duração da transição: 1s;
}
A terceira etapa começa a escrever código JS:
A cópia do código é a seguinte:
(function (doc) {
// Colete locais de link para cada capítulo
var pos = [],
// Coleção de itens no menu
links = doc.getElementsByTagName ('a'),
// Colete o título do capítulo
títulos = doc.getElementsByTagName ('H1'),
// menu suspenso
menu = doc.getElementById ('Menubar'),
// Seleção atual
currentItem = null;
// Adicione um estilo vermelho
var addclass = function (elemento) {
currentItem && currentItem.removeattribute ('classe');
element.setAtAttribute ('classe', 'vermelho');
currentItem = elemento;
},
// A página da web é lançada alta:
getScrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Calcule a posição de rolagem
startcroll = function () {
var scrolltop = getsCrolltop (),
len = titles.length,
i = 0;
// Artigo 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addclass (links [0]);
retornar;
}
// o último
if (scrolltop> = pos [len-1]) {
addclass (links [len-1]);
retornar;
}
//meio
para (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addclass (links [i]);
quebrar;
}
}
};
// Clique no link na lista para alterar a cor
MENU.ONCLICK = function (e) {
VAR Target = E.Target || E.Srcelement;
if (Target.nodename.tolowerCase () === 'A') {
// Lista Indicação do status do item
addclass (destino);
retornar;
}
if (Target.nodename.tolowerCase () === 'P') {
if (Target.className == 'static') {
// Ocultar menu
this.className = 'Menu Slidein';
setTimeout (function () {
Target.className = 'estático toshow';
Target.innerhtml = 'show';
}, 1000);
}outro{
// Mostrar menu
Target.className = 'static';
Target.innerhtml = 'hide';
this.className = 'Menu Slideout';
}
}
}
// Calcule a posição inicial de cada capítulo
var ln = titles.length;
enquanto (-ln> -1) {
//TitlesOnn ].OffSetParent.OffSettop = 0;
pos.unshift (títulos [ln] .offSettop);
}
startcroll ();
// role
window.onscroll = function () {
startcroll ()
}
})(documento);
analisar:
1. Implementar salto automático para a seção especificada
Esta etapa pode ser feita usando a função âncora da tag <a>. Como o HTML5 não suporta o atributo de nome no futuro (o HTML5 não o suporta. Especifique o nome da âncora.), Considere usar o ID para saltar.
2. Identifique qual capítulo no conteúdo à esquerda pertence ao item no menu flutuante.
Esta etapa é um ponto difícil, vamos analisá -lo brevemente:
2.1 O primeiro caso é clicar no item de menu manualmente. Isso é fácil, basta identificar o elemento clicado.
2.2 No segundo caso, role ou arraste a barra de rolagem pelo botão do mouse do meio. No momento, você precisa associar o conteúdo à esquerda e os itens do menu à direita. Esta é a parte mais difícil. Considere a estratégia de implementar passo a passo, começando com fácil e depois difícil, e cada um rompe.
2.2.1 Colete primeiro a altura da coordenada do elemento do título. Essa é a altura vertical de todas as tags H1. Salvar a matriz 1.
2.2.2 Colete o elemento A no item de menu e armazene -o na matriz 2.
2.2.3 Ouça o evento de rolagem e determine a qual item de menu o conteúdo atual pertence.
Ao dar um passo, é recomendável desenhar um quadro no artigo do manuscrito:
A1
********************
* A2
*
********************
* A3
*
********************
*
* A4
*
Toda vez que você rola, você determinará qual intervalo é a distância de rolagem atual. Se for 0 a A1, é o capítulo 1, A1 a A2, é o capítulo 2 e assim por diante.
Em relação à altura da posição do elemento, eu simplesmente uso elemento.OffSettop para obtê -lo aqui. Pode haver problemas de compatibilidade. Se você usa jQuery, ele deve ser $ ('elemento'). Offset (). Top,
Da mesma forma, eu simplesmente usei document.body.scrolltop para obter a altura da barra de rolagem. Se for substituído por jQuery, deve ser $ (janela) .Scrolltop ();
O objetivo do desenho é concretizar problemas abstratos, ajude -nos a pensar e descobrir as regras. Talvez pareça mais alto chamando -o de "modelagem".
Deve -se enfatizar que os relacionamentos na matriz 1 e na matriz 2 devem corresponder um por um. Por exemplo, o correspondente <a href = "#h1"> é <h1 id = "h1">.
2.3 No terceiro caso, o indicador de status do menu quando você entra diretamente na página. Por exemplo, se você inserir um endereço como index.html#h3, o H3 no menu deverá ser destacado.
3. Implemente a exibição e oculte a animação do menu flutuante.
3.1 Esta etapa deve ser relativamente simples, você pode considerar fazê -lo primeiro. Basta usar a propriedade Tramsform do CSS3. É simples e eficiente. Se você é navegador cruzado, seja compatível.
Observe que a transformação: translate3d (eixo x, eixo y, eixo z); O uso do 3D pode usar a aceleração de hardware para aumentar os efeitos da animação, mas o consumo de energia aumentará, portanto, faça bom uso! O primeiro parâmetro é controlar as direções esquerda e direita. Se for positivo, significa mover para a direita e, se for negativo, significa mover -se para a esquerda. Na verdade, isso não é rigoroso. De fato, deve ser determinado com base no ponto de referência. Por exemplo, quando a coordenada X de um elemento é 0, o valor de x é aumentado para a direita e reduzido para a esquerda e 0 é redefinido.
Após a análise, o código é escrito. Não há nada a dizer sobre isso. Aproveite o sentimento musical gerado digitando o teclado.
Depois de escrever, visualizá -lo, clique no menu, pule para o capítulo especificado e clique no item para ficar vermelho, atualizar a página atual e a exibição de dependência está correta. Deslize a roda de rolagem e os itens do menu mudam de acordo com as alterações no conteúdo. Arraste a barra de rolagem. O mesmo é verdadeiro. Por fim, clique para ocultar, retire o menu, clique para mostrar e o menu desliza para fora. Isso completará a função de suspensão.
O exposto acima é tudo sobre este artigo, espero que gostem.