web-dev-qa-db-fra.com

Position: les boutons collants ne fonctionnent pas dans IE 11

J'ai besoin de rendre le div contenant les boutons collant, afin que les boutons de ce div restent en bas lorsque l'utilisateur fait défiler l'écran.

Ceci afin que l'utilisateur n'ait pas à faire défiler complètement vers le bas pour cliquer sur les boutons.

Le div contenant les boutons est tout en bas ici:

<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 &#39;^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$&#39;."
              data-val-regex-pattern="^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\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 &#39;^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\s]*$&#39;."
              data-val-regex-pattern="^[A-Z]+[a-zA-Z&#39;&#39;-&#39;\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 classe CSS pour le rendre collant (fonctionnant sur Firefox):

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

Mais la même chose ne fonctionne pas sur Internet Explorer 11. Une aide sur la façon de faire fonctionner le même code sur IE11?

Résultat attendu: 

Exemple de page: https://jsfiddle.net/Thunderbolt36/a4yjfg13/

htmlcsscss3css-positioninternet-explorer-11
15
Tx36

sticky ne fonctionne pas sur IE11, mais heureusement, dans ce cas, vous pouvez utiliser fixed, qui fonctionnera sur les anciens et les nouveaux navigateurs.

.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);
}

Et vous pouvez réellement supprimer sticky, car il n'est pas utilisé comme prévu. sticky excelle, c'est-à-dire que lorsque vous le positionnez sous le bord supérieur, et lorsque vous le faites défiler vers le bas, il se déplacera avec la page jusqu'à ce qu'il atteigne le bord supérieur, où il s'arrêtera et restera jusqu'à ce qu'un nouveau défilement vers le haut.

Note latérale: prise en charge Edge sticky à partir de la version 16

22
LGSon

IE11 ne prend pas en charge position:sticky et ne le sera jamais (car il est remplacé par Edge): voir la prise en charge du navigateur sur Can I Use

CSS Tricks a récemment publié quelque chose qui pourrait vous aider: Sticky Footer, Five Ways

Même dans ce cas, l'exemple flex ne fonctionnera pas avec IE11, mais vous pouvez le modifier en utilisant le code de Normalizing Cross-browser Flexbox Bugs .

10
aardrian

Cela peut être mieux résolu par StickyBits, qui est un polyfill pour position: sticky pour IE (et autres navigateurs): https://github.com/dollarshaveclub/stickybits

Le plus important pour moi:

il n'a pas la nervosité que les plugins qui sont construits autour de position: fixed ont car il essaie de prendre en charge position: sticky first.

5
nachtigall

Comme Internet Explorer ne supporte pas position: sticky, j'ai fait une position: version fixe pour Internet Explorer 100% compatible avec les autres navigateurs. Dans ce code Javascript, je vérifie d'abord si le navigateur est Explorer, puis j'applique des modifications aux styles.

Dans mon cas, j'ajoute la classe 'sticky-top-ie' à la classe 'sticky-top'. 'sticky-top' est une classe avec position: sticky et un autre code CSS.

Ce code ne résoudra pas directement votre problème; vous devrez modifier et tester votre code sur IE et autres navigateurs.

CODE 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 CONNEXES:

 .sticky-top-ie{
     position:fixed;
     width:100%;
     z-index:99;
     top:0px;
 }
1
gtamborero