Wie kann ich mit JavaScript den Scroll- und Ausblendeffekt der festen Navigationsleiste oben auf der Webseite erzielen?

Wie verwende ich JavaScript, um den Scroll- und Ausblendeffekt der festen Navigationsleiste oben auf der Webseite zu erzielen?

Im heutigen Internetzeitalter konzentriert sich Webdesign häufig auf die Benutzererfahrung und die Integrität der Seitenfunktionen. Die Webnavigationsleiste ist die Brücke zwischen Benutzern und der Website. Daher wird die Navigationsleiste im Allgemeinen oben auf der Seite platziert, um Benutzern das schnelle Auffinden der benötigten Informationen zu erleichtern. Wenn Benutzer jedoch im Internet surfen, kann das längere Anzeigen der Navigationsleiste oben Platz auf der Seite beanspruchen und den Benutzern ein Unbehagen bereiten. Um das Benutzererlebnis zu verbessern, können wir daher JavaScript verwenden, um den Scroll- und Ausblendeffekt der festen Navigationsleiste oben auf der Webseite zu implementieren.

Der Weg, diesen Effekt zu erzielen, besteht darin, Scroll-Ereignisse abzuhören und das Ein- und Ausblenden der Navigationsleiste anhand der Scroll-Richtung und des Scroll-Abstands zu beurteilen. Das Folgende ist der Beispielcode:

// 获取导航栏元素
const navBar = document.querySelector('.navbar');
// 定义初始滚动位置
let lastScrollTop = 0;
// 定义初始导航栏高度
const navBarHeight = navBar.offsetHeight;

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 获取当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 判断滚动方向
    if (scrollTop > lastScrollTop) {
        // 向下滚动，隐藏导航栏
        navBar.style.transform = `translateY(-${navBarHeight}px)`;
    } else if (scrollTop < lastScrollTop) {
        // 向上滚动，显示导航栏
        navBar.style.transform = 'translateY(0)';
    }

    // 更新滚动位置
    lastScrollTop = scrollTop;
});

Der obige Code ruft zunächst das Navigationsleistenelement mit dem Klassennamen .navbar über document.querySelector('.navbar') ab. Als Nächstes definieren wir eine Variable lastScrollTop, um die letzte Bildlaufposition zu speichern, und verwenden navBar.offsetHeight, um die Höhe der Navigationsleiste zu ermitteln. document.querySelector('.navbar') 获取了具有 .navbar 类名的导航栏元素。接下来，我们定义了一个变量 lastScrollTop 用于存储上次滚动的位置，并且使用 navBar.offsetHeight 获取了导航栏的高度。

然后，我们通过 window.addEventListener('scroll', function() { ... }) 来监听滚动事件。在滚动事件的回调函数中，我们首先获取当前的滚动位置 scrollTop。接下来，通过判断当前滚动位置和上次滚动位置的大小关系，我们可以确定滚动的方向。

如果当前滚动位置大于上次滚动位置，则表示用户向下滚动，我们将导航栏向上隐藏。需要注意的是，我们通过设置 navBar.style.transform 的 translateY 属性来实现导航栏的移动，将导航栏的高度（navBarHeight）作为位移参考，以保证导航栏完全隐藏。

相反，如果当前滚动位置小于上次滚动位置，则表示用户向上滚动，我们将导航栏重新显示。

最后，我们需要更新滚动位置 lastScrollTop

Dann hören wir Scroll-Ereignisse über window.addEventListener('scroll', function() { ... }). In der Callback-Funktion des Scroll-Events erhalten wir zunächst die aktuelle Scroll-Position scrollTop. Als nächstes können wir die Richtung des Bildlaufs bestimmen, indem wir das Größenverhältnis zwischen der aktuellen Bildlaufposition und der letzten Bildlaufposition beurteilen.

Wenn die aktuelle Scrollposition größer als die letzte Scrollposition ist, bedeutet das, dass der Benutzer nach unten scrollt und wir die Navigationsleiste nach oben ausblenden. Es ist zu beachten, dass wir die Navigationsleiste verschieben, indem wir die Eigenschaft translateY von navBar.style.transform festlegen und die Höhe der Navigationsleiste ändern (navBarHeight Code >) als Verschiebungsreferenz, um sicherzustellen, dass die Navigationsleiste vollständig ausgeblendet ist. 🎜🎜Wenn die aktuelle Bildlaufposition hingegen kleiner als die letzte Bildlaufposition ist, bedeutet das, dass der Benutzer nach oben gescrollt hat und wir die Navigationsleiste erneut anzeigen. 🎜🎜Schließlich müssen wir die Bildlaufposition <code>lastScrollTop für den Vergleich im nächsten Bildlaufereignis aktualisieren. 🎜🎜Mit dem obigen Codebeispiel können wir den Scroll- und Ausblendeffekt der festen Navigationsleiste oben auf der Webseite erzielen und so das Surferlebnis des Benutzers verbessern. Natürlich können wir je nach tatsächlichem Bedarf einige Anpassungen und Verbesserungen am Stil und der Wirkung der Navigationsleiste vornehmen, um bessere Benutzerinteraktionseffekte zu erzielen. 🎜

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript den Scroll- und Ausblendeffekt der festen Navigationsleiste oben auf der Webseite erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!