web-dev-qa-db-ja.com

位置：スティッキーボタンが機能しないIE 11

ユーザーが画面をスクロールしてもそのdiv内のボタンが下に留まるように、ボタンを含む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>

.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>

スティッキーにするCSSクラス（Firefoxで動作）：

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

しかし、同じことがInternet Explorer 11でも機能していません。同じコードをIE11で機能させる方法についてのヘルプはありますか？

期待される結果： 

サンプルページ： https://jsfiddle.net/Thunderbolt36/a4yjfg13/

htmlcsscss3css-positioninternet-explorer-11
15
Tx36

stickyはIE11では機能しませんが、幸いなことに、この場合、古いブラウザーと新しいブラウザーの両方で機能するfixedを使用できます。

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

また、stickyは意図したとおりに使用されないため、実際にドロップできます。 stickyは優れています。つまり、トップエッジの下に配置すると、1つ下にスクロールすると、ページと共にトップエッジに到達するまで移動します。

補足：バージョン16からのエッジサポートsticky

22
LGSon

IE11はposition:stickyをサポートせず、（Edgeに取って代わられているため）決してサポートしません： Can I Useのブラウザサポートを参照

CSS Tricksは最近役立つ何かを投稿しました： Sticky Footer、Five Ways

それでも、flexの例はIE11では機能しませんが、 Normalizing Cross-browser Flexbox Bugs のコードを使用して微調整できます。

10
aardrian

これは、IE（およびその他のブラウザ）のposition: stickyのポリフィルであるStickyBitsによって最もよく解決できます。 https://github.com/dollarshaveclub/stickybits

私にとって最も重要なこと：

position：fixedを中心に構築されたプラグインが持つジャンプ性はありません。position：stickyをサポートしようとするためです。

5
nachtigall

Internet Explorerはposition：stickyをサポートしていないため、他のナビゲーターと100％互換性のあるInternet Explorerのposition：fixedバージョンを作成しました。このJavascriptコードでは、最初にナビゲーターがExplorerかどうかを確認してから、スタイルにいくつかの変更を適用します。

私の場合、クラス「sticky-top-ie」をクラス「sticky-top」に追加します。 'sticky-top'は位置を持つクラスです：スティッキーと他のcssコード。

このコードは問題を直接解決しません。 IEおよびその他のナビゲーターでコードを変更およびテストする必要があります。

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：

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