Heim Web-Frontend js-Tutorial jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)_jquery

jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)_jquery

May 16, 2016 pm 05:53 PM
菜单

自己试着写了下:

复制代码 代码如下:

$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
}else if(scroH$(".nav").css({"position":"static","margin":"0 auto"});
}
})
})

主要思路
  1.当这个元素进入可视区域后,然后要离开可视区域的时候,就改变定位方式。
  2.当元素回离浏览器顶部最初高度时,再还原其定位方式l
在线演示:http://demo.jb51.net/js/2012/myfix/
DEMO下载:http://www.jb51.net/jiaoben/45053.html
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

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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)

Windows 11: Der einfache Weg, Startlayouts zu importieren und zu exportieren Windows 11: Der einfache Weg, Startlayouts zu importieren und zu exportieren Aug 22, 2023 am 10:13 AM

In Windows 11 wurde das Startmenü neu gestaltet und verfügt über einen vereinfachten Satz von Apps, die in einem Seitenraster angeordnet sind, im Gegensatz zum Vorgänger, der Ordner, Apps und Apps im Startmenü hatte. Sie können das Startmenü-Layout anpassen und es auf andere Windows-Geräte importieren und exportieren, um es nach Ihren Wünschen zu personalisieren. In dieser Anleitung besprechen wir Schritt-für-Schritt-Anleitungen zum Importieren des Startlayouts, um das Standardlayout unter Windows 11 anzupassen. Was ist Import-StartLayout in Windows 11? „Startlayout importieren“ ist ein Cmdlet, das in Windows 10 und früheren Versionen zum Importieren von Anpassungen für das Startmenü verwendet wird

So stellen Sie im Rechtsklick-Menü von Windows 11 standardmäßig „Weitere Optionen anzeigen' ein So stellen Sie im Rechtsklick-Menü von Windows 11 standardmäßig „Weitere Optionen anzeigen' ein Jul 10, 2023 pm 12:33 PM

Eine der nervigsten Änderungen, die wir Benutzer nie wollen, ist die Aufnahme von „Weitere Optionen anzeigen“ in das Kontextmenü mit der rechten Maustaste. Sie können es jedoch entfernen und erhalten das klassische Kontextmenü in Windows 11 zurück. Kein Mehrfachklicken und Suchen nach diesen ZIP-Verknüpfungen in Kontextmenüs mehr. Befolgen Sie diese Anleitung, um unter Windows 11 zu einem vollständigen Kontextmenü mit der rechten Maustaste zurückzukehren. Fix 1 – CLSID manuell anpassen Dies ist die einzige manuelle Methode auf unserer Liste. Sie müssen bestimmte Schlüssel oder Werte im Registrierungseditor anpassen, um dieses Problem zu beheben. Hinweis – Registrierungsänderungen wie diese sind sehr sicher und funktionieren problemlos. Daher sollten Sie eine Sicherung der Registrierung erstellen, bevor Sie dies auf Ihrem System versuchen. Schritt 1 – Probieren Sie es aus

So bearbeiten Sie Nachrichten auf dem iPhone So bearbeiten Sie Nachrichten auf dem iPhone Dec 18, 2023 pm 02:13 PM

Mit der nativen Nachrichten-App auf dem iPhone können Sie gesendete Texte ganz einfach bearbeiten. Auf diese Weise können Sie Ihre Fehler und Zeichensetzung korrigieren und sogar falsche Phrasen/Wörter, die möglicherweise in Ihren Text übernommen wurden, automatisch korrigieren. In diesem Artikel erfahren Sie, wie Sie Nachrichten auf dem iPhone bearbeiten. So bearbeiten Sie Nachrichten auf dem iPhone. Erforderlich: iPhone mit iOS16 oder höher. Sie können iMessage-Text nur in der Nachrichten-App bearbeiten, und zwar nur innerhalb von 15 Minuten nach dem Senden des Originaltexts. Nicht-iMessage-Text wird nicht unterstützt und kann daher nicht abgerufen oder bearbeitet werden. Starten Sie die Nachrichten-App auf Ihrem iPhone. Wählen Sie unter „Nachrichten“ die Konversation aus, deren Nachricht Sie bearbeiten möchten

Implementierungsschritte zur Implementierung der Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS Implementierungsschritte zur Implementierung der Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS Oct 16, 2023 am 08:27 AM

Die Schritte zum Implementieren einer Menünavigationsleiste mit Schatteneffekt mithilfe von reinem CSS erfordern spezifische Codebeispiele. Im Webdesign ist die Menünavigationsleiste ein sehr häufiges Element. Durch das Hinzufügen eines Schatteneffekts zur Menünavigationsleiste können Sie nicht nur deren Ästhetik verbessern, sondern auch das Benutzererlebnis verbessern. In diesem Artikel verwenden wir reines CSS, um eine Menünavigationsleiste mit Schatteneffekt zu implementieren, und stellen spezifische Codebeispiele als Referenz bereit. Die Implementierungsschritte sind wie folgt: HTML-Struktur erstellen Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, um die Menünavigationsleiste aufzunehmen. von

So deaktivieren Sie das Menü „Weitere Optionen anzeigen' in Windows 11 So deaktivieren Sie das Menü „Weitere Optionen anzeigen' in Windows 11 Apr 13, 2023 pm 08:10 PM

Immer mehr Menschen erleben das neue und verbesserte Microsoft-Betriebssystem, aber es scheint, dass einige von ihnen immer noch das Design der alten Schule bevorzugen. Es besteht kein Zweifel, dass das neue Kontextmenü eine beeindruckende Konsistenz in Windows 11 bringt. Wenn wir Windows 10 betrachten, sorgt die Tatsache, dass jede Anwendung über ein eigenes Kontextmenüelement verfügt, bei manchen Menschen für große Verwirrung. Von der transparenten Taskleiste von Windows 11 bis zu den abgerundeten Ecken ist dieses Betriebssystem ein Meisterwerk. In diesem Zusammenhang sind Benutzer auf der ganzen Welt daran interessiert, zu erfahren, wie sie das Menü „Weitere Optionen anzeigen“ von Windows 11 schnell deaktivieren können. Der Vorgang ist ziemlich einfach. Wenn Sie also im selben Boot sitzen, sollten Sie ihn unbedingt gründlich ausprobieren

So entfernen Sie die Option „Im Windows-Terminal öffnen' aus dem Kontextmenü mit der rechten Maustaste in Windows 11 So entfernen Sie die Option „Im Windows-Terminal öffnen' aus dem Kontextmenü mit der rechten Maustaste in Windows 11 Apr 13, 2023 pm 06:28 PM

Standardmäßig verfügt das Kontextmenü von Windows 11 per Rechtsklick über eine Option namens „Im Windows-Terminal öffnen“. Dies ist eine sehr nützliche Funktion, die es Benutzern ermöglicht, Windows Terminal an einem bestimmten Ort zu öffnen. Wenn Sie beispielsweise mit der rechten Maustaste auf einen Ordner klicken und die Option „Im Windows-Terminal öffnen“ auswählen, wird Windows-Terminal gestartet und legt diesen bestimmten Speicherort als aktuelles Arbeitsverzeichnis fest. Obwohl dies eine großartige Funktion ist, findet nicht jeder Verwendung für diese Funktion. Einige Benutzer möchten diese Option möglicherweise einfach nicht in ihrem Rechtsklick-Kontextmenü haben und möchten sie entfernen, um ihr Rechtsklick-Kontextmenü aufzuräumen.

So lehnen Sie Werbung in Windows 11 in 5 einfachen Schritten ab So lehnen Sie Werbung in Windows 11 in 5 einfachen Schritten ab Apr 22, 2023 pm 07:16 PM

Wir alle wissen, dass Werbung manchmal nervig sein kann. Wie Anzeigen zu den am wenigsten willkommenen Zeiten auftauchen; wie sie Sie auf unerwünschte Plattformen führen; und das Schlimmste ist, dass einige Anzeigen bekanntermaßen eine Bedrohung durch Malware darstellen. Wenn Sie sich also gefragt haben, wie Sie die ständige Windows 11-Werbung loswerden können, aber nicht wissen, wie, finden Sie hier die Hilfe, auf die Sie gewartet haben. In diesem Artikel Warum erhalte ich Werbung in Windows 11? Trotz der dringenden Notwendigkeit, Windows 11-Anzeigen loszuwerden, denken wir, dass es sich lohnt zu verstehen, was diese Anzeigen auslöst und warum Sie sie erhalten: Funktionen, die durch aktuelle Windows-Updates hinzugefügt wurden – Funktionen wie Neuigkeiten und Interessen können es schwierig machen, Benachrichtigungen ohne sie zu erhalten Benutzen Sie Ihren Computer. Das

So lösen Sie das Problem, dass das Win10-Startmenü nicht geöffnet werden kann: Stellen Sie schnell die Startmenümethode des Systems ein So lösen Sie das Problem, dass das Win10-Startmenü nicht geöffnet werden kann: Stellen Sie schnell die Startmenümethode des Systems ein Jan 13, 2024 am 09:39 AM

Standardmäßig befindet sich die Schaltfläche „Start“ unten links auf dem Bildschirm und die Schaltfläche „Start“ ist ein kreisförmiges Windows-Logo. Einige Benutzer des Win10-Systems berichteten jedoch, dass es beim Klicken auf das Windows-Grafiklogo keine Reaktion und keinerlei Anzeichen für ein Öffnen gab. Was ist los? Wissen Sie, einige der wichtigeren Vorgänge befinden sich im Startmenü. Keine Panik, lernen wir mit dem Editor die Lösung für das Problem, dass das Win10-Startmenü nicht geöffnet werden kann! Microsoft hat das bekannte „Start“-Menü im Win10-System wiederhergestellt, das für Win10-Benutzer attraktiver ist. Bei der Verwendung treten jedoch auch einige problematische Probleme auf, wenn wir beispielsweise auf das Startmenü in der unteren linken Ecke klicken , wird normalerweise ein Dialogfeld angezeigt.

See all articles