応答jqueryの粘着性の問題

Question

私は後に、それは非常にうまく機能するのスクロールスティッキーナビゲーションバーのヘッダを設計しますが、私のresuluitonサイズ未満の場合768px私の粘着性のナビゲーションバーには、リロード（更新）ページ

HTML

以外もう動作しません。

<div class="sticky-checkin oteller-sticky"> 
       <div class="sticky-container"> 
        <div class="row mt10"> 
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6 mb10"> 
         <input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width sticky-oda-giris" placeholder="Giriş" data-toggle="modal" data-target="#popupCheckin"> 
         <span class="oda-otel-giris"></span> 
        </div> 
        <div class="col-lg-2 col-md-2 col-lg-2 col-md-2 col-sm-2 col-xs-6 "> 
        <input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width sticky-oda-cikis" placeholder="Çıkış" data-toggle="modal" data-target="#popupCheckin"> 
         <span class="oda-otel-giris"></span> 
        </div> 
       </div> 
       </div><!-- sticky container--> 
       <div class="modal fade fullscreen" id="popupCheckin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
        <div class="modal-dialog otel-filtreleme-popup"> 
         <div class="modal-content" style="color:#fff;"> 
          <div class="modal-header" style="border:1px solid orange;"> 
            <h3>OTEL BUL</h3> 
            <button type="button" class="close btn btn-link" data-dismiss="modal" aria-hidden="true"><i class="fa fa-close fa-lg" style="color:#faa82b;"></i></button> 
            <h4 class="modal-title text-center"><span class="sr-only">main navigation</span></h4> 
          </div> 
          <div class="modal-body otel-filtreleme-popup"> 
           <div class="container-margin nomargin nopadding notopmargin"> 
            <div class="row"> 
             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 otel-arama"> 
             <input type="text" name="oda-otel" id="oda-otel" class="oda-otel input-full-width" placeholder="Otel adını veya Bölgeyi yaz"> 
             <span class="oda-otel-icon"></span> 
             </div> 
            </div><!-- otel ara--> 
            <div class="row mt10"> 
            <div class="col-lg-6 col-md-6 col-xs-6 mb10"> 
             <input type="text" name="oda-otel-giris" class="oda-giris-cikis input-full-width" placeholder="Giriş"> 
              <span class="oda-otel-giris"></span> 
            </div> 
            <div class="col-lg-6 col-md-6 col-xs-6"> 
             <input type="text" name="oda-otel-cikis" class="oda-giris-cikis input-full-width" placeholder="Çıkış"> 
              <span class="oda-otel-giris"></span> 
            </div> 
           </div><!-- otel giriş çıkış--> 
           <div class="row "> 
            <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> 
            <select name="oda-otel-kisi" id="oda-otel-kisi" class="oda-otel-kisi" style="display: none;"> 
             <option value="">Kişi</option> 
             <option value="">1 Kişi</option> 
             <option value="">2 Kişi</option> 
             <option value="">3 Kişi</option> 
            </select><div class="nice-select oda-otel-kisi" tabindex="0"><span class="current">Kişi</span><ul class="list"><li data-value="" class="option selected">Kişi</li><li data-value="" class="option">1 Kişi</li><li data-value="" class="option">2 Kişi</li><li data-value="" class="option">3 Kişi</li></ul></div><span class="oda-otel-kisi-icon"></span> 
            </div> 
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
            <input type="submit" class="btn btn-warning otel-oda-sec" value="OTEL ARA"> 
            </div> 
           </div><!-- otel kişi sayısı--> 
           </div> 
          </div> 
         </div><!-- /.modal-content --> 
        </div><!-- /.modal-dialog --> 
       </div><!-- /.fullscreen --> 
      </div><!-- sticky checkin--> 

JS

$(function() { 
    $(window).scroll(function() { 
    if (!$(".hotel-search-box").length) { 
    return false; //Check if the element exist 
    } 
    if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $("#otel-checkin").val() == ""){ 
      $(".sticky-checkin").fadeIn(500); 
     }else{ 
      $(".sticky-checkin").fadeOut(500); 
     } 
    }); 
}); 

CSS

.sticky-checkin{ 
     position:fixed; 
     top:0; 
     left:0; 
     z-index:1042; 
     background:#FFF; 
     width:100%; 
     padding:15px 0; 
     @include clearfix; 
    -webkit-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36); 
    -moz-box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36); 
    box-shadow: -1px 10px 7px -9px rgba(61,61,61,0.36); 
    display:none; 
    } 
    .sticky-container{ 
     width:50%; 
     position: relative; 
     margin:0 auto; 
     @include clearfix; 
     input,select{ 
      cursor:pointer; 
     } 
    } 

click to see online demo

Answer 1

問題がディスプレイである：なしプロパティ。ウィンドウを縮小すると、粘着性のあるコンテナが隠れてしまいます。しかし、ブラウザを完全なウィンドウに戻すと、このプロパティは変更されません。

あなたのCSSルールとJSのウィンドウサイズ変更の処理（もしあれば）を確認することをお勧めします。

EDIT：ディスプレイのため、ヘッダーが壊れています。 <div style="display: HERE GET'S COMPLICATED;" class="sticky-checkin oteller-sticky">。サイズを変更すると、値なしが取得され、ウィンドウサイズの変更に関係なく設定されたままになります。しかし、別のことがあります。このヘッダーが表示されるようにスクロールダウンすると、ブロックに値が設定されます。この時点で、ウィンドウのサイズを変更すると、ヘッダーはページを更新するまで維持されます。 適切にデバッグするためのコードが多すぎますので、ヘッダーの表示を担当するコードを分離してみてください。