html - Posición: los botones fijos no funcionan en IE 11
css css3 (5)
Como Internet Explorer no admite position: sticky, he hecho una posición: versión fija para Internet Explorer 100% compatible con otros navegadores. En este código Javascript primero verifico si el navegador es Explorer y luego aplico algunos cambios a los estilos.
En mi caso, agrego la clase ''sticky-top-ie'' a la clase ''sticky-top''. ''sticky-top'' es una clase con posición: sticky y algún otro código CSS.
Este código no resolverá directamente su problema; necesitará modificar y probar su código en IE y otros navegadores.
CÓDIGO JAVASCRIPT:
<script>
(function($) {
// Check if Navigator is Internet Explorer
if(navigator.userAgent.indexOf(''MSIE'')!==-1
|| navigator.appVersion.indexOf(''Trident/'') > -1){
// Scroll event check
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Activate sticky for IE if scrolltop is more than 20px
if ( scroll > 20) {
$(''.sticky-top'').addClass( "sticky-top-ie" );
}else{
$(''.sticky-top'').removeClass( "sticky-top-ie" );
}
});
}
})( jQuery );
</script>
CSS RELACIONADO:
.sticky-top-ie{
position:fixed;
width:100%;
z-index:99;
top:0px;
}
Necesito hacer que el div que contiene los botones sea adhesivo, para que los botones en ese div permanezcan en la parte inferior mientras el usuario desplaza la pantalla.
Esto es para que el usuario no tenga que desplazarse hacia abajo para hacer clic en los botones.
El div que contiene los botones está hasta aquí:
<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>
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="container body-content">
<h2>Edit</h2>
<form action="/Movies/Edit/3" method="post">
<input name="__RequestVerificationToken" type="hidden" value="kBoJXRfdKTYn4uw8fXl3V_yNVa_xD1s0vyepuNLJLxC3InZ-jA1R4b9EjFDO3SGMMp6T7E91m_wy9vGzm4Z0WUm1_8vljyrKMz6frJcQBqY1" />
<div class="form-horizontal">
<h4>Movie</h4>
<hr />
<input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="3" />
<div class="form-group">
<label class="control-label col-md-2" for="Title">Title</label>
<div class="col-md-10">
<input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 3 and a maximum length of 60." data-val-length-max="60" data-val-length-min="3" id="Title" name="Title" type="text" value="Ghostbusters 2"
/>
<span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ReleaseDate">Release Date</label>
<div class="col-md-10">
<input class="text-box single-line" data-val="true" data-val-date="The field Release Date must be a date." data-val-required="The Release Date field is required." id="ReleaseDate" name="ReleaseDate" type="date" value="1986-02-23" />
<span class="field-validation-valid" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Genre">Genre</label>
<div class="col-md-10">
<input class="text-box single-line" data-val="true" data-val-length="The field Genre must be a string with a maximum length of 30." data-val-length-max="30" data-val-regex="The field Genre must match the regular expression '^[A-Z]+[a-zA-Z''-'/s]*$'."
data-val-regex-pattern="^[A-Z]+[a-zA-Z''-'/s]*$" data-val-required="The Genre field is required." id="Genre" name="Genre" type="text" value="Comedy" />
<span class="field-validation-valid" data-valmsg-for="Genre" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Price">Price</label>
<div class="col-md-10">
<input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="The field Price must be between 1 and 100." data-val-range-max="100" data-val-range-min="1" data-val-required="The Price field is required."
id="Price" name="Price" type="text" value="9.99" />
<span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Rating">Rating</label>
<div class="col-md-10">
<input class="text-box single-line" data-val="true" data-val-length="The field Rating must be a string with a maximum length of 5." data-val-length-max="5" data-val-regex="The field Rating must match the regular expression '^[A-Z]+[a-zA-Z''-'/s]*$'."
data-val-regex-pattern="^[A-Z]+[a-zA-Z''-'/s]*$" id="Rating" name="Rating" type="text" value="G" />
<span class="field-validation-valid" data-valmsg-for="Rating" data-valmsg-replace="true"></span>
</div>
</div>
<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>
</div>
</form>
</div>
La clase CSS para hacerlo pegajoso (trabajando en Firefox):
.sticky-button-thing-not-working-on-ie {
position: sticky;
bottom: 0;
right: 0;
background: rgba(0, 211, 211, 0.6);
}
Pero lo mismo no funciona en Internet Explorer 11. ¿Alguna ayuda sobre cómo hacer que el mismo código funcione en IE11?
Resultado Esperado:
Página de muestra: https://jsfiddle.net/thunderbolt36/a4yjfg13/
Esto puede resolverse mejor con StickyBits, que es un polyfill para la
position: sticky
para IE (y otros navegadores):
https://github.com/dollarshaveclub/stickybits
Lo más importante para mi:
no tiene el nerviosismo que tienen los complementos que se construyen alrededor de la posición: fijo porque intenta admitir la posición: adhesivo primero.
IE11 no admitirá la
position:sticky
y nunca lo hará (ya que Edge lo reemplaza):
consulte el soporte del navegador en ¿Puedo usarlo?
CSS Tricks publicó recientemente algo que puede ayudar: Pie de página adhesivo, Cinco maneras
Incluso entonces, el ejemplo
flex
no funcionará con IE11, pero puede modificarlo usando el código de
Normalización de errores de Flexbox entre navegadores
.
Verifique su página en la parte superior
<!DOCTYPE HTML>
sticky
no funciona en IE11, pero afortunadamente, en este caso, puede usar
fixed
, que funcionará en navegadores antiguos y nuevos.
.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);
}
Y en realidad puede dejarse
sticky
, ya que no se usa de la manera prevista.
sticky
sobresale, es decir, cuando lo coloca debajo del borde superior, y cuando uno se desplaza hacia abajo, se moverá con la página hasta llegar al borde superior, donde se detendrá y permanecerá hasta que uno se desplace nuevamente hacia arriba.
Nota al margen: soporte de borde
sticky
desde la versión 16