webentwicklung-frage-antwort-db.com.de

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

Grundsätzlich möchte ich die Klasse aus 'header' entfernen, nachdem der Benutzer ein wenig nach unten geblättert und eine weitere Klasse hinzugefügt hat, um das Aussehen zu ändern.

Ich versuche, die einfachste Möglichkeit herauszufinden, aber ich kann es nicht funktionieren lassen.

$(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.

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

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

Fiddle

Durch das Entfernen der clearHeader-Klasse entfernen Sie außerdem den position:fixed; aus dem Element sowie die Möglichkeit, es über den $(".clearHeader")-Selektor erneut auszuwählen. Ich würde vorschlagen, diese Klasse nicht zu entfernen und eine neue CSS-Klasse für das Styling hinzuzufügen.

Und wenn Sie die Klassenaddition "zurücksetzen" möchten, wenn die Benutzer nach oben scrollen:

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

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

Fiddle

edit: Hier ist die Version, die den Header-Selector zwischenspeichert. Bessere Leistung, da das DOM nicht jedes Mal beim Scrollen abgefragt wird und Sie jede Klasse sicher aus dem Header-Element entfernen bzw. 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');
        }
    });
});

Fiddle

147
Fabrício Matté

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;
}
3
Marc

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

2
Shahzad Yousuf

In einem ähnlichen Fall wollte ich es 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 Debounce-Funktionalität 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 jemand das hilfreich.

1
chrisbergr

Ist dieser Wert beabsichtigt? if (scroll <= 500) { ... Dies bedeutet, dass es von 0 bis 500 und nicht von 500 und mehr geschieht. In dem ursprünglichen Beitrag sagten Sie "nachdem der Benutzer ein wenig nach unten scrollen"

1
ido

Für Android-Handys kann $ (window) .scroll (function () und $ (document) .scroll (function ()) möglicherweise nicht funktionieren. 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 für mich funktioniert. Ich hoffe es wird dir helfen. 

0
user9261696