Question

我设计了一个粘性导航栏标题后滚动它的工作非常好但是如果我的结果大小小于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

问题在于 display：none 属性。缩小窗口大小后，您的粘性容器将被隐藏。但是，当您将浏览器恢复到完整窗口时，此属性将保持不变。

我建议检查你的CSS规则和窗口调整大小的JS处理（如果有的话）。

编辑：由于 display 属性，您的标头已损坏。 <div style="display: HERE GET'S COMPLICATED;" class="sticky-checkin oteller-sticky">。调整大小时，它会检索值 none ，无论窗口大小如何变化，它都会保持设置状态。然而还有另外一件事。如果向下滚动以显示此标题，则会将其值设置为 block 。此时，尝试调整窗口大小，标题将保持打开状态直到刷新页面。我有太多的代码可以正确调试它，所以尝试隔离负责标题显示的代码。

响应式jquery粘性问题

1 个答案: