Desigur, ați văzut butoane pe multe site-uri care se mișcă simultan cu derularea paginilor. Un exemplu obișnuit de astfel de butoane poate fi o acțiune, o comandă de apel sau o săgeată care vă permite să defilați pagina în sus.
Principiul de funcționare al tuturor acestor butoane se bazează pe poziția: proprietate fixă; Luați în considerare structura html de mai jos:
Am creat un buton simplu cu clasa fixbut, la care a fost atribuit stilul. În stil, cel mai important, uita-te la poziția: proprietate fixă; - permite butonului să "plutească" mereu pe ecranul site-ului, iar fundul: 20px; dreapta: 20px; instalați-o din partea de jos, dreapta. Pentru a schimba butonul spre stânga, schimbați din dreapta în stânga. Alte stiluri pentru frumusete.
Butonul nostru nu este clicabil. Să adăugăm o tranziție la orice pagină, făcând clic pe ea. Acest lucru se poate face astfel:
sau folosind legătura obișnuită:
Dacă aveți nevoie de un buton în sus, puteți înlocui valoarea de referință cu # în ambele cazuri. Pagina este reîncărcată în partea de sus atunci când este apăsat butonul.
Luați în considerare câteva chifle pe care le puteți utiliza nu numai în acest proiect.
1. Pentru a face butonul (și orice element pe care pseudo-clasa: hover poate atribui) schimba fără probleme culoarea, adăugați următoarea proprietate clasei fixedbut: -webkit-transition: 0.33s all ease-out; -o-tranziție: 0,33s cu ușurință; tranziție: 0.33s toate ușurință-out;
2. Dacă trebuie să dezactivați clicul pe un link sau executând un script, adăugați proprietatea: pointer-events: none; De exemplu, când faceți clic pe un link: Bonus! link-ul nu va trece prin.
3. Pentru a face clic pe link, pagina se deschide într-o filă nouă, adăugați atributul target = "_ blank".
Citiți de asemenea
- Meniul plutitor pe site cu css
- Creați ferestre în centrul ecranului jQuery + css: poziția absolută
- Obțineți, atribuiți un stil CSS jQuery
- Cum de a schimba ordinea blocurilor div în versiunea mobilă din cauza css
Articole similare
Trimiteți-le prietenilor: