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.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//>=, not <=
if (scroll >= 500) {
//clearHeader, not clearheader - caps H
$(".clearHeader").addClass("darkHeader");
}
}); //missing );
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");
}
});
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');
}
});
});
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
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.
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"
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.