Heim Web-Frontend js-Tutorial javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

May 16, 2016 pm 05:43 PM
固定 滚动 Spitze

现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码

复制代码 代码如下:
















menuFixed.js 代码
复制代码 代码如下:

function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

最后需要说明的是,该效果在 ie6 下不支持,因为 ie6 不支持 position:fixed;
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
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)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
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)

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.

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 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

Wie implementiert man das Scrollen zu einer bestimmten Elementposition in JavaScript? Wie implementiert man das Scrollen zu einer bestimmten Elementposition in JavaScript? Oct 22, 2023 am 08:12 AM

Wie implementiert man die Funktion zum Scrollen zu einer bestimmten Elementposition in JavaScript? Wenn wir auf einer Webseite die Aufmerksamkeit des Benutzers auf eine bestimmte Elementposition lenken müssen, können wir JavaScript verwenden, um die Funktion zum Scrollen zur angegebenen Elementposition zu implementieren. In diesem Artikel wird die Implementierung dieser Funktion über JavaScript vorgestellt und entsprechende Codebeispiele bereitgestellt. Zuerst müssen wir die Positionsinformationen des Zielelements erhalten. Sie können Element.getBoundingClient verwenden

HTML, CSS und jQuery: Erstellen Sie ein Bulletin-Board mit automatischem Bildlauf HTML, CSS und jQuery: Erstellen Sie ein Bulletin-Board mit automatischem Bildlauf Oct 27, 2023 pm 06:31 PM

HTML, CSS und jQuery: Erstellen Sie ein automatisch scrollendes Bulletin Board. Im modernen Webdesign werden Bulletin Boards häufig verwendet, um wichtige Informationen zu übermitteln und die Aufmerksamkeit des Benutzers zu erregen. Auf Webseiten wird häufig ein Bulletin-Board mit automatischem Bildlauf verwendet. Es ermöglicht das Scrollen und Anzeigen des Bulletin-Inhalts auf der Seite, wodurch der Effekt der Informationsanzeige und das Benutzererlebnis verbessert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery ein Bulletin-Board mit automatischem Bildlauf erstellen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst brauchen wir einen HT

Überwachen Sie das Scrollverhalten von Iframes Überwachen Sie das Scrollverhalten von Iframes Feb 18, 2024 pm 08:40 PM

Um das Scrollen eines Iframes zu überwachen, sind bestimmte Codebeispiele erforderlich. Wenn wir das Iframe-Tag verwenden, um andere Webseiten in eine Webseite einzubetten, müssen wir manchmal bestimmte Vorgänge für den Inhalt im Iframe ausführen. Eine der häufigsten Anforderungen besteht darin, auf das Scroll-Ereignis des Iframes zu warten, damit der entsprechende Code beim Scrollen ausgeführt werden kann. Im Folgenden wird die Verwendung von JavaScript zum Überwachen des Scrollens eines Iframes vorgestellt und spezifische Codebeispiele als Referenz bereitgestellt. Holen Sie sich zuerst das iframe-Element

So implementieren Sie den Vollbild-Scrolleffekt in Vue So implementieren Sie den Vollbild-Scrolleffekt in Vue Nov 08, 2023 am 08:42 AM

So erzielen Sie einen Vollbild-Bildlaufeffekt in Vue Im Webdesign kann der Vollbild-Bildlaufeffekt Benutzern ein einzigartiges und reibungsloses Surferlebnis bieten. In diesem Artikel wird erläutert, wie Sie in Vue.js einen Vollbild-Bildlaufeffekt erzielen, sowie spezifische Codebeispiele. Um den Vollbild-Scrolleffekt zu erzielen, müssen wir zunächst das Vue.js-Framework zum Erstellen des Projekts verwenden. In Vue.js können wir vue-cli verwenden, um schnell ein Projektgerüst zu erstellen. Dann müssen wir einige Bibliotheken von Drittanbietern einführen, um den Scroll-Effekt zu erzielen, z. B. Fullpage

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.

See all articles