Klasse mit jquery basierend auf vertikalem Bildlauf hinzufügen / entfernen?

Im Grunde möchte ich die Klasse aus dem 'Header' entfernen, nachdem der Benutzer ein wenig nach unten gescrollt und eine weitere Klasse hinzugefügt hat, um das Aussehen zu ändern.

Ich versuche den einfachsten Weg herauszufinden, aber ich kann es nicht zum Laufen bringen.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}    

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

Ich bin sicher, ich mache etwas sehr Grundlegendes falsch.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

Geige

Wenn Sie die clearHeaderKlasse entfernen, entfernen Sie sie position:fixed;aus dem Element und können sie über den $(".clearHeader")Selektor erneut auswählen . Ich würde vorschlagen, diese Klasse nicht zu entfernen und eine neue CSS-Klasse für Stylingzwecke hinzuzufügen.

Und wenn Sie den Klassenzusatz "zurücksetzen" möchten, wenn die Benutzer einen Bildlauf durchführen:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

Geige

Bearbeiten: Hier ist die Version, die den Header-Selektor zwischenspeichert - bessere Leistung, da das DOM nicht bei jedem Bildlauf abgefragt wird und Sie jede Klasse sicher zum Header-Element entfernen / hinzufügen können, ohne die Referenz zu verlieren:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Geige

Fügen Sie einen Übergangseffekt hinzu, wenn Sie möchten:

http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader {
  height:50px;
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;

  -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.clearHeader.darkHeader {
 background:#000;
}

Es ist mein Code

jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

Es funktioniert gut

Ist dieser Wert beabsichtigt? if (scroll <= 500) { ...Dies bedeutet, dass es von 0 bis 500 und nicht von 500 und höher geschieht. Im ursprünglichen Beitrag sagten Sie "nachdem der Benutzer ein wenig nach unten gescrollt hat"

In einem ähnlichen Fall wollte ich vermeiden, aufgrund von Leistungsproblemen immer addClass oder removeClass aufzurufen. Ich habe die Scroll-Handler-Funktion in zwei einzelne Funktionen aufgeteilt, die je nach aktuellem Status verwendet werden. Ich habe auch eine Entprellungsfunktion gemäß diesem Artikel hinzugefügt: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

        var $header = jQuery( ".clearHeader" );         
        var appScroll = appScrollForward;
        var appScrollPosition = 0;
        var scheduledAnimationFrame = false;

        function appScrollReverse() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition > 500 )
                return;
            $header.removeClass( "darkHeader" );
            appScroll = appScrollForward;
        }

        function appScrollForward() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition < 500 )
                return;
            $header.addClass( "darkHeader" );
            appScroll = appScrollReverse;
        }

        function appScrollHandler() {
            appScrollPosition = window.pageYOffset;
            if ( scheduledAnimationFrame )
                return;
            scheduledAnimationFrame = true;
            requestAnimationFrame( appScroll );
        }

        jQuery( window ).scroll( appScrollHandler );

Vielleicht findet das jemand hilfreich.

Hier ist ein reines Javascript-Beispiel für die Behandlung von Klassen während des Bildlaufs.

Sie würden vermutlich scroll Ereignisse drosseln wollen Handhabung, um so mehr als Handler Logik komplexer wird, in diesem Fall throttlevon lodashlib ist praktisch.

Und wenn Sie Spa machen, denken Sie daran, dass Sie Ereignis-Listener löschen müssen, removeEventListenerwenn sie nicht benötigt werden (z. B. während des onDestroyLebenszyklus-Hooks Ihrer Komponente, wie destroyed()bei Vue, oder möglicherweise bei der Rückgabe der useEffectHook- Funktion für React).

const navbar = document.getElementById('navbar')

// OnScroll event handler
const onScroll = () => {

  // Get scroll value
  const scroll = document.documentElement.scrollTop

  // If scroll value is more than 0 - add class
  if (scroll > 0) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled")
  }
}

// Optional - throttling onScroll handler at 100ms with lodash
const throttledOnScroll = _.throttle(onScroll, 100, {})

// Use either onScroll or throttledOnScroll
window.addEventListener('scroll', onScroll)

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background-color: #89d0f7;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
  transition: box-shadow 500ms;
}

#navbar.scrolled {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

#content {
  height: 3000px;
  margin-top: 60px;
}

<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>

Für Android-Handys kann $ (Fenster) .scroll (Funktion () und $ (Dokument) .scroll (Funktion ()) funktionieren oder nicht. Verwenden Sie stattdessen Folgendes.

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

Dieser Code hat bei mir funktioniert. Hoffe es wird dir helfen.