Repetir algunas ruedas selectivamente puede no ser algo malo. El blog de Aaron ha agregado un menú suspendido, que parece ser muy alto. Aunque este tipo de truco no es la primera vez que lo ha visto, nunca lo he escrito yo mismo. Hoy escribiré selectivamente sobre esta función. El siguiente es el proceso de desarrollo de esta rueda, que también puede considerarse como un proceso de análisis e implementación de un documento de requisito.
Dirección de demostración: http://sandbox.runjs.cn/show/to8wdmuy
Descarga del código fuente: https://github.com/bjtqti/floatmenu
El primer paso es crear una estructura de sección DOM:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> AppCarrier </title>
<link rel = "stylesheet" href = "menú.css">
</ablo>
<Body>
<div id = "contenido">
<h1 id = "test1"> test1 </h1>
<p> El pasado puede doler. Pero puedes correr de él o aprender de él </p>
<p> El pasado fue doloroso, pero escapas o creces de él </p>
<p> Uno se encuentra con su destino en el camino que toma para evitarlo </p>
<p> A menudo está en camino a escapar del destino, pero se encuentra inesperadamente </p>
<p> Las reglas están destinadas a romperse </p>
<p> Las reglas deben romperse. </p>
<p> Los años pueden arruinar la piel, pero para dejar de entusiasmo arrugas el alma. </p>
<p> El paso del tiempo solo hace que la cara sea vieja, pero la pasión ya no hace que el corazón se marchite. </p>
<h1 id = "test2"> test2 </h1>
<p> Solo practicando constantemente el conocimiento que has aprendido, ¿puedes realmente dominarlo? </p>
<p> vive todos los días al máximo. </p>
<p> Disfruta todos los días. </p>
<p> Mantenga sus ojos en las estrellas y sus pies en el suelo. </p>
<p> tiene ambiciones elevadas y mantiene los pies en el suelo. </p>
<p> Siempre esté listo para una aventura inesperada. </p>
<p> Vaya listo para comenzar una aventura inesperada en cualquier momento. </p>
<p> La vida está llena de decepción. No puedes detenerte en las cosas. Tienes que seguir adelante. </p>
<p> La vida a menudo es infeliz, no se entregue en el pasado y avance valientemente. </p>
<p> Soy un espíritu libre. No puedo estar enjaulado. </p>
<p> Mi alma es libre y no debe estar atada. </p>
<p> A veces el corazón ve lo que es invisible para el ojo. </p>
<p> aquellos que están fuera de la vista pueden sentirlo </p>
<p> Las cosas simples también son las cosas más extraordinarias, y solo los sabios pueden verlas. </p>
<p> Lo más ordinario es también lo más extraordinario, y solo lo sabio lo entiende. </p>
<h1 id = "test3"> test3 </h1>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
<p> cuántos xxxxxx </p>
</div>
<div id = "Menubar">
<p> escondite </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 = "menú.js"> </script>
</html>
El segundo paso es preparar el archivo CSS:
La copia del código es la siguiente:
ul {
Tipo de estilo de lista: Ninguno;
}
a {
Decoración de texto: ninguna;
}
/*Área de contenido del artículo*/
#contenido {
Ancho: 400px;
margen: 0 auto;
tamaño de fuente: 2em;
}
/*Menú flotante*/
.menu {
Posición: fijo;
Arriba: 20%;
Derecha: 0;
Ancho: 200px;
borde: 1px gris sólido;
Border-Radius: 5px;
}
.menu li {
Altura: 2em;
Línea de altura: 2em;
}
.rojo {
Color: rojo;
}
.esconder {
Pantalla: ninguno;
}
/*Ocultar menú flotante*/
.Slidein {
transformar: traducir3D (202px, 0, 0);
Duración de transición: .5s;
}
/*Mostrar el menú flotante*/
.SlideOut {
transformar: traducir3D (0, 0, 0);
Duración de transición: .5s;
}
.static {
Color:#007Aff;
Text-Align: Center;
}
/*Muestra la bola flotante*/
.Thow {
Pantalla: bloque;
Ancho: 4.8em;
Altura: 2em;
Línea de altura: 2em;
Border-Radius: .5em;
borde: 1px gris sólido;
transformar: traduce3d (-5em, 0, 0);
Duración de transición: 1s;
}
El tercer paso comienza a escribir código JS:
La copia del código es la siguiente:
(función (doc) {
// recopilar ubicaciones de enlaces para cada capítulo
var pos = [],
// colección de elementos en el menú
enlaces = doc.getElementsBytagName ('a'),
// recopilar el título del capítulo
títulos = doc.getElementsBytagName ('H1'),
// Menú colgante
menú = doc.getElementById ('Menubar'),
// Selección actual
CurrentItem = null;
// Agregar un estilo rojo
var addClass = function (elemento) {
currentItem && currentItem.removeAttribute ('class');
element.setAttribute ('class', 'rojo');
CurrentItem = elemento;
},
// La página web se implementa en lo alto:
getscrollTop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Calcular la posición de desplazamiento
inicioCroll = function () {
var scrollTop = getscrollTop (),
len = titles.length,
i = 0;
// Artículo 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addClass (enlaces [0]);
devolver;
}
// el último
if (scrolltop> = pos [len-1]) {
addClass (enlaces [Len-1]);
devolver;
}
//medio
para (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addClass (enlaces [i]);
romper;
}
}
};
// Haga clic en el enlace de la lista para cambiar el color
menú.OnClick = function (e) {
Var Target = E.Target || E.Sracelement;
if (target.nodename.tolowercase () === 'a') {
// Enumere la indicación del estado del elemento
addClass (objetivo);
devolver;
}
if (target.nodename.tolowercase () === 'P') {
if (target.classname == 'static') {
// Ocultar menú
this.classname = 'menú Slidein';
setTimeOut (function () {
Target.className = 'static toshow';
Target.innerhtml = 'show';
}, 1000);
}demás{
// Show Menu
Target.className = 'static';
Target.innerhtml = 'ocultar';
this.className = 'Menu SlideOut';
}
}
}
// Calcule la posición inicial de cada capítulo
var ln = titles.length;
while (-ln> -1) {
//TITLES[LENELEFANTIA.OFFSETPARENT.OFFSETTOP = 0;
pos.unshift (títulos [ln] .offsettop);
}
inicioCroll ();
//Voluta
window.onscroll = function () {
inicioCroll ()
}
})(documento);
analizar:
1. Implementar salto automático a la sección especificada
Este paso se puede hacer utilizando la función de anclaje de la etiqueta <a>. Dado que HTML5 no admite el atributo de nombre en el futuro (HTML5 no lo admite. Especifique el nombre del ancla), considere usar ID para saltar.
2. Identifique qué capítulo del contenido de la izquierda pertenece al elemento en el menú flotante.
Este paso es un punto difícil, analicémoslo brevemente:
2.1 El primer caso es hacer clic en el elemento del menú manualmente. Esto es fácil, simplemente identifique el elemento hecho hecho.
2.2 En el segundo caso, desplácese o arrastre la barra de desplazamiento a través del botón del mouse medio. En este momento, debe asociar el contenido a la izquierda y los elementos del menú a la derecha. Esta es la parte más difícil. Considere la estrategia de implementar paso a paso, comenzando con fácil y luego difícil, y cada uno se atraviesa.
2.2.1 Primero recopile la altura de la coordenada del elemento del título. Esa es la altura vertical de todas las etiquetas H1. Guardar la matriz 1.
2.2.2 Recoge el elemento A en el elemento del menú y guárdelo en la matriz 2.
2.2.3 Escuche el evento de desplazamiento y determine a qué elemento de menú pertenece el contenido actual.
Al dar un paso, se recomienda dibujar una imagen en el documento del manuscrito:
A1
********************
* A2
*
********************
* A3
*
********************
*
* A4
*
Cada vez que se despliegue, determinará qué rango es la distancia de desplazamiento actual. Si es 0 a A1, es el Capítulo 1, A1 a A2, es el Capítulo 2, y así sucesivamente.
Con respecto a la altura de posición del elemento, simplemente uso elemento.offsettop para obtenerla aquí. Puede haber problemas de compatibilidad. Si usa jQuery, debería ser $ ('elemento'). Offset (). Arriba,
Del mismo modo, simplemente usé document.body.scrolltop para obtener la altura de la barra de desplazamiento. Si se reemplaza con jQuery, debe ser $ (ventana) .scrolltop ();
El propósito de dibujar es concretizar problemas abstractos, ayudarnos a pensar y descubrir las reglas. Tal vez se vea más alto llamándolo "modelado".
Debe enfatizarse que las relaciones en la matriz 1 y la matriz 2 deberían corresponder una por una. Por ejemplo, el correspondiente <a href = "#h1"> es <h1 id = "h1">.
2.3 En el tercer caso, el indicador de estado del menú cuando ingresa directamente a la página. Por ejemplo, si ingresa a través de una dirección como index.html#H3, se debe resaltar el H3 en el menú.
3. Implemente la visualización y oculta la animación del menú flotante.
3.1 Este paso debe ser relativamente simple, puede considerar hacerlo primero. Simplemente use la propiedad de formación de tranvías de CSS3. Es simple y eficiente. Si es un navegador cruzado, sea compatible.
Tenga en cuenta que transformar: traducir3D (eje x, eje y, eje z); El uso de 3D puede usar la aceleración de hardware para aumentar los efectos de la animación, pero el consumo de energía aumentará, ¡así que haga un buen uso! El primer parámetro es controlar las direcciones izquierda y derecha. Si es positivo, significa moverse hacia la derecha, y si es negativo, significa moverse hacia la izquierda. Esto en realidad no es riguroso. De hecho, debe determinarse en función del punto de referencia. Por ejemplo, cuando la coordenada x de un elemento es 0, entonces el valor de x se incrementa a la derecha y se reduce a la izquierda, y 0 se restablece.
Después del análisis, el código está escrito. No hay nada que decir sobre esto. Disfrute de la sensación musical generada escribiendo el teclado.
Después de escribir, visitelo, haga clic en el menú, salte al capítulo especificado y haga clic en el elemento para ponerse rojo, actualizar la página actual y la pantalla de dependencia es correcta. Deslice la rueda de desplazamiento y los elementos del menú cambian en consecuencia con los cambios en el contenido. Arrastre la barra de desplazamiento. Lo mismo es cierto. Finalmente, haga clic para esconder, retraer el menú, haga clic para mostrar y el menú se desliza. Esto completará la función de suspensión.
Lo anterior se trata de este artículo, espero que les guste.