CSS Sticky-Tasten div funktioniert nicht in IE 11

Ich muss das div mit den Schaltflächen sticky machen, so dass die Tasten in diesem div unten bleiben werden, wie der Benutzer den Bildschirm scrollt. Dies ist so, dass der Benutzer nicht ganz nach unten scrollen muss, um auf die Schaltflächen zu klicken.CSS Sticky-Tasten div funktioniert nicht in IE 11

Musterseite: https://jsfiddle.net/thunderbolt36/a4yjfg13/

Die div die Tasten enthält, ist den ganzen Weg hinunter hier:

<div class="form-group sticky-button-thing-not-working-on-ie"> 
    <div class="col-md-offset-2 col-md-10"> 
     <input type="submit" value="Save" class="btn btn-default" /> 
    </div> 
</div>

Die CSS-Klasse, um es klebrig zu machen (Arbeit an Firefox):

.sticky-button-thing-not-working-on-ie { 
    position: sticky; 
    bottom: 0; 
    right: 0; 
    background: rgba(0, 211, 211, 0.6); 
}

Aber das gleiche funktioniert nicht auf Internet Explorer 11.

Irgendwelche Hilfe, wie man denselben Code auf IE11 funktioniert?

Erwartetes Ergebnis: https://i.imgur.com/bEHXcrG.png

Quelle

2016-06-05 Tx36

IE11 nicht position:sticky unterstützen und wird nie (wie es von Edge abgelöst wird): see browser support at Can I Use

CSS Tricks vor kurzem etwas geschrieben, die helfen können: Sticky Footer, Five Ways Selbst

dann funktioniert das flex Beispiel nicht mit IE11, aber Sie können es mit Code von Normalizing Cross-browser Flexbox Bugs optimieren.

Quelle

2016-06-05 20:08:38 aardrian

sticky funktioniert nicht auf IE11, aber zum Glück, in diesem Fall können Sie fixed verwenden, die auf alten und neuen Browsern funktioniert.

.sticky-button-thing-not-working-on-ie { 
    position: fixed;       /* added to support older browsers */ 
    position: sticky; 
    bottom: 0; 
    right: 0; 
    background: rgba(0, 211, 211, 0.6); 
}

Und Sie können sticky tatsächlich fallen, da es nicht verwendet wird, wie es beabsichtigt ist. sticky übertrifft, d. H., Wenn Sie es unterhalb der Oberkante positionieren, und wenn Sie nach unten scrollen, bewegt es sich mit der Seite, bis es die Oberkante erreicht, wo es stehen bleibt und bis zum nächsten Hochscrollen bleibt.

Randbemerkung: Edge-Unterstützung sticky ab Version 16

Quelle

2016-06-05 20:20:23 LGSon

gut, sind feste Elemente positioniert – shabunc

zu Darstellungsfeld @shabunc Das ist richtig, und 'fixed' ist die nächstgelegene Sie für Browsern nicht unterstützt' sticky' ... Nun, Sie könnten natürlich ein kleines Skript hinzufügen, damit es sich als "sticky" verhält – LGSon

sticky! = fixed – kpup

Dies kann am besten durch StickyBits gelöst werden, die eine polyfill für position: sticky für IE ist (und andere Browser): https://github.com/dollarshaveclub/stickybits

mir am wichtigsten :

es hat nicht die jumpiness, dass plugins, die rund um position: fixed haben, weil es versucht, position: sticky first.

Quelle

2017-10-19 13:22:38 nachtigall

Überprüfen Sie Ihre Seite in Top-<!DOCTYPE HTML>

Quelle

2017-11-03 09:28:20

CSS Sticky-Tasten div funktioniert nicht in IE 11

Antwort

Verwandte Themen