Sticky-Header auf Bildlauf in Microsoft Edge

Question

Ich habe ein Element voller Breite, das beim Laden der Seite aus dem Bildschirm ist, aber wenn ein Benutzer die Seite nach unten scrollt, bewegt sich das Element als eine typische Scroll sollte.

Sobald dieses Element den oberen Rand der Seite erreicht, möchte ich, dass es oben bleibt und die Kopfzeile für den Rest der Seite ist, um darunter zu blättern.

Ich habe dies auf allen Browsern mit Ausnahme von Microsoft Edge funktioniert. Ich habe die Code-Schnipsel unten ohne Erfolg bei Edge ausprobiert. Ich habe auch versucht, den Scroll-Abstand auf eine bestimmte Anzahl von px zu setzen, aber das hat nicht funktioniert, da die Höhen von Browser und Geräten unterschiedlich waren.

Ich greife jetzt nach allem, hat jemand mögliche Lösungen, die ich versuchen könnte? Mahalo!

$(window).scroll(function() { 
if ($(window).scrollTop() > $(window).height()) { 
    $('#systemSticky').removeClass('sticky'); 
} else { 
    $('#systemSticky').addClass('sticky'); 
} 
}); 

--Und dieses ---

var stickyOffset = $('#systemSticky').offset().top; 

$(window).scroll(function(){ 
var sticky = $('#systemSticky'), 
    scroll = $(window).scrollTop(); 

if (scroll >= stickyOffset) sticky.addClass('fixed'); 
else sticky.removeClass('fixed'); 
}); 

--- --- und dieses

$(document).scroll(function() { 
var scrollDistance = $(document).scrollTop(); 
var stickyMenu = $("#systemSticky"); 
if(stickyMenu.offset().top == 0) { 
    stickyMenu.addClass({ 
     "position": "fixed", 
     "top" : "0", 
     "width" : "100%" 
    }); 
} else { 
    stickyMenu.css("position", "relative"); 
} 
}); 

--- --- und dieses

var header = $("#systemSticky"); 
$(window).scroll(function() { 
var scroll = window.scrollTop(); 
if (scroll = 100vh) { 
    header.addClass("position: fixed"); 
} else { 
    header.removeClass("position: fixed"); 
} 
}); 

Answer 1

Versuchen Sie etwas wie dieses:

function sticky_relocate() { 
var window_top = $(window).scrollTop(); 
var div_top = $('#sticky-anchor').offset().top; 
if (window_top > div_top) { 
    $('#sticky').addClass('stick'); 
    $('#sticky-anchor').height($('#sticky').outerHeight()); 
} else { 
    $('#sticky').removeClass('stick'); 
    $('#sticky-anchor').height(0); 
} 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

Auf dieser HTML:

<div id="sticky-anchor"></div> 
<div id="sticky">This will stay at top of page</div> 

Und fügen Sie diese zu Ihrem CSS:

#sticky { 
    padding: 0.5ex; 
    width: 600px; 
    background-color: #333; 
    color: #fff; 
    font-size: 2em; 
    border-radius: 0.5ex; 
} 

#sticky.stick { 
    margin-top: 0 !important; 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
    border-radius: 0 0 0.5em 0.5em; 
} 

Wenn die if-Anweisung wahr ist, wird es eine neue Klasse zu der bereits bestehenden Klasse gilt. Sie können also jeden gewünschten Stil anpassen, wenn das div am oberen Rand des Fensters erscheint (in diesem Fall).

Zur weiteren Erläuterung Besuch dieses post, und schauen Sie sich diese fiddle