Heim Web-Frontend js-Tutorial jquery erkennt den Effekt eines festen Navigationsanfangs und imitiert Mogujie_jquery

jquery erkennt den Effekt eines festen Navigationsanfangs und imitiert Mogujie_jquery

May 16, 2016 pm 04:33 PM
固定 导航 Spitze

jquery erkennt den Effekt der festen Oberseite der Navigation und imitiert Mogujie. Es fühlt sich ziemlich gut an, Freunde in Not können sich darauf beziehen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var headHeight=$(".header").height()+10;
var nav=$(".nav");
$(window).scroll(function(){
if($(this).scrollTop()>headHeight){
nav.addClass("navFix");
}
else{
nav.removeClass("navFix");
}
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不支持fixed方法
.header{ width:1000px; height:60px; margin:0 auto; text-align:center;}
.nav{ border:1px solid #ccc; border-radius:5px; overflow:hidden; height:30px; width:1000px; margin:10px auto; background:#fff;}
.nav li{ float:left; padding:0 10px; height:30px; line-height:30px;}
.nav li a{ text-decoration:none; color:#0CF;}
.nav li a:hover{ color:#000; text-decoration:underline;}
.nav ul{ list-style:none;}
.navFix{ position:fixed; left:0; top:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;} //实现ie6不支持fixed方法
.content{ width:1000px; margin:10px auto;}
</style>
</head>

<body>
<div class="header">
<h1>导航固定在页面顶部测试</h1>
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
</ul>
</div>
<div class="content">
<p>11111</p>
<p>11111</p>
<p>11111</p><p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div>
</body>
</html>
Nach dem Login kopieren
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Konvertieren Sie die Festplatte von VirtualBox in eine dynamische Festplatte und umgekehrt Konvertieren Sie die Festplatte von VirtualBox in eine dynamische Festplatte und umgekehrt Mar 25, 2024 am 09:36 AM

Beim Erstellen einer virtuellen Maschine werden Sie aufgefordert, einen Festplattentyp auszuwählen. Sie können zwischen einer festen Festplatte und einer dynamischen Festplatte wählen. Was ist, wenn Sie sich für Festplatten entscheiden und später feststellen, dass Sie dynamische Festplatten benötigen, oder umgekehrt? Sie können die eine in die andere konvertieren. In diesem Beitrag erfahren Sie, wie Sie eine VirtualBox-Festplatte in eine dynamische Festplatte umwandeln und umgekehrt. Eine dynamische Festplatte ist eine virtuelle Festplatte, die zunächst klein ist und mit der Speicherung von Daten in der virtuellen Maschine immer größer wird. Dynamische Festplatten sparen sehr effizient Speicherplatz, da sie nur so viel Host-Speicherplatz beanspruchen, wie benötigt wird. Wenn jedoch die Festplattenkapazität zunimmt, kann die Leistung Ihres Computers geringfügig beeinträchtigt werden. In virtuellen Maschinen werden häufig Festplatten und dynamische Festplatten verwendet

So legen Sie ein Hintergrundbild für den Computer-Sperrbildschirm fest, das sich nicht ändert So legen Sie ein Hintergrundbild für den Computer-Sperrbildschirm fest, das sich nicht ändert Jan 17, 2024 pm 03:24 PM

Im Allgemeinen kann das Desktop-Hintergrundmuster eines Computers vom Benutzer angepasst werden. Einige Windows 10-Benutzer möchten jedoch das Desktop-Hintergrundbild auf ihrem Computer reparieren können, wissen aber nicht, wie sie es einstellen sollen. Tatsächlich ist es sehr einfach und leicht zu bedienen. So reparieren Sie das Hintergrundbild des Computer-Sperrbildschirms, ohne es zu ändern: 1. Klicken Sie mit der rechten Maustaste auf das Bild, das Sie festlegen möchten, und wählen Sie „Als Hintergrundbild festlegen“. 2. Win+R zum Öffnen und Ausführen. Geben Sie dann „gpedit.msc“ ein. 3. Erweitern Sie zu: Benutzerkonfiguration – Verwaltungsvorlagen – Systemsteuerung – Personalisierung 4. Klicken Sie auf Personalisierung und wählen Sie dann „Änderungen am Desktop-Hintergrund verhindern“. 5. Wählen Sie „Aktiviert“. 6. Öffnen Sie dann die Einstellungen und geben Sie den Hintergrund ein. Wenn Sie diese kleinen Wörter sehen, bedeutet das, dass dies der Fall ist wurde eingerichtet.

So halten Sie das Widgets-Panel in Windows 11 immer sichtbar So halten Sie das Widgets-Panel in Windows 11 immer sichtbar Aug 13, 2023 pm 07:13 PM

Wie zeige ich das Widget-Board beim Öffnen in Windows 11 immer an? Nun können Sie damit beginnen, die neuesten Windows-Updates herunterzuladen und zu installieren. Im neuesten Update-Patch für das Insider-Programm hat Microsoft bekannt gegeben, dass Benutzer in den Kanälen „Development“ und „Canary“ das Widget-Board geöffnet anpinnen können, sodass es immer auf einen Blick sichtbar ist. So zeigen Sie Widgets-Boards in Windows 11 immer als geöffnet an: Um ein Board zum Öffnen anzuheften, klicken Sie laut Microsoft einfach auf das Reißzweckensymbol in der oberen rechten Ecke des Boards. Sobald Ihr Board geöffnet angepinnt ist, ignoriert das Widget-Board das Schließen nicht mehr. Während das Board angeheftet ist, können Sie es dennoch schließen, indem Sie das Widget-Board über die Schaltfläche „Widgets“ in der Taskleiste öffnen. wenn Widget

Was ist die horizontale Zahl 8 auf der Navigationskarte? Was ist die horizontale Zahl 8 auf der Navigationskarte? Jun 27, 2023 am 11:43 AM

Die horizontale Zahl 8 auf der Navigationskarte bedeutet Dunst, mäßig ist ein gelbes Warnsignal 8 und stark ist ein orangefarbenes Warnsignal 8.

Die neueste Version 18.8.0 der Baidu Maps App wurde veröffentlicht. Sie führt erstmals die Ampelradarfunktion ein und fügt eine Parkempfehlungsfunktion in Echtzeit hinzu Die neueste Version 18.8.0 der Baidu Maps App wurde veröffentlicht. Sie führt erstmals die Ampelradarfunktion ein und fügt eine Parkempfehlungsfunktion in Echtzeit hinzu Aug 06, 2023 pm 06:05 PM

Sowohl die Android- als auch die iOS-Version der Baidu Map App haben Version 18.8.0 veröffentlicht, die erstmals die Ampelradarfunktion einführt und damit branchenführend ist. Laut offizieller Einführung unterstützt sie nach dem Einschalten des Ampelradars die automatische Erkennung Beidou High-Precision kann die Position von Ampeln während der Fahrt in Echtzeit auslösen und so automatisch eine grüne Welle auslösen. Darüber hinaus bietet die neue Funktion eine vollständig stille Navigation, wodurch der Kartenbereich prägnanter wird, wichtige Informationen auf einen Blick klar sind und keine Sprachübertragung erforderlich ist, sodass sich der Fahrer mehr auf das Fahren konzentrieren kann. Baidu Maps startet eine Ampel-Countdown-Funktion Oktober 2020, unterstützt die Echtzeit-Countdown-Vorhersage. Die Navigation zeigt automatisch die verbleibenden Sekunden des Countdowns an, wenn sie sich einer Ampelkreuzung nähern, sodass Benutzer immer einen Überblick über die Straßenverhältnisse vor sich haben. Ampel-Countdown bis 31. Dezember 2022

In welcher Navigationssoftware ist das Fußball-Navigations-Sprachpaket enthalten? In welcher Navigationssoftware ist das Fußball-Navigations-Sprachpaket enthalten? Nov 09, 2022 pm 04:33 PM

Das Sprachpaket für die Fußballnavigation in der Software „Amap Navigation“ ist eines der Navigationssprachpakete für die Autoversion der Amap-Karte. Der Inhalt ist die Navigationsstimme der Fußballkommentarversion von Huang Jianxiang. Einstellungsmethode: 1. Öffnen Sie die Amap-Software. 2. Klicken Sie, um die Option „Weitere Tools“ – „Navigationsstimme“ aufzurufen. 3. Suchen Sie nach „Huang Jianxiang Passionate Voice“ und klicken Sie auf „Herunterladen“. , klicken Sie auf „Nur Sprache verwenden“.

So fixieren Sie Computernotizen auf dem Desktop So fixieren Sie Computernotizen auf dem Desktop Feb 15, 2024 pm 04:00 PM

Das Betriebssystem Windows 10 ist mit einer praktischen Notizfunktion vorinstalliert, sodass geschätzte Benutzer nach Belieben temporäre Notizen oder Nachrichten schreiben können. Angenommen, Sie möchten dies als Werkzeug verwenden, um Haftnotizen schnell und einfach zu finden und zu verwenden, oder Sie möchten dieses praktische kleine Programm zum einfachen Nachschlagen in der Mitte eines großen Bildschirms anheften. Dann können Sie die oben genannten Wünsche mit nur wenigen Handgriffen umsetzen Schritte: So fixieren Sie Haftnotizen auf Ihrem Computer. Auf dem Desktop 1. Klicken Sie auf „Start“ und dann auf die Haftnotiz hier. 2. Nach dem Öffnen der Haftnotiz können Sie hier direkt den entsprechenden Inhalt eingeben und auch auf das Pluszeichen klicken 3. Wenn Sie eine Notizsoftware eines Drittanbieters verwenden möchten, können Sie die Einstellungen der entsprechenden Software eingeben.

Amap führt eine aktualisierte Version des ETA-Dienstes für Fahrgäste ein: Echtzeitanalyse des aktuellen Straßenzustands und genauere geschätzte Ankunftszeit Amap führt eine aktualisierte Version des ETA-Dienstes für Fahrgäste ein: Echtzeitanalyse des aktuellen Straßenzustands und genauere geschätzte Ankunftszeit Apr 30, 2024 am 08:37 AM

Laut Nachrichten dieser Website vom 29. April kündigte Amap offiziell die Einführung einer aktualisierten Version der Fahr-ETA an (Anmerkung dieser Website: ETA ist die geschätzte Ankunftszeit, die sich auf die geschätzte Zeit bezieht, die der Benutzer für die Abreise benötigt Vom aktuellen Moment aus verfolgen und einer bestimmten Route bis zum Ziel folgen)-Dienst, der Benutzern dabei helfen soll, die Dauer ihrer Route und die Verkehrslage genauer einzuschätzen und sie bei Reiseentscheidungen zu unterstützen. Diese Kartenanwendung ist die neueste aktualisierte Amap-App. Sie führt das „Ultra-Large-Scale-Graph-Faltungs-Neuronales-Netzwerk-Modell“ ein, das Verkehrsflussmuster besser erfassen und lernen, städtische Straßennetze und Autobahnsysteme unterstützen und das räumlich-zeitliche Bild genau darstellen kann dynamische Veränderungen der Verkehrsbedingungen. Darüber hinaus integriert die neue Version der Karte das iTransformer-Zeitreihenvorhersagemodell weiter, um Echtzeitanalysen zu unterstützen.

See all articles