我有一个网页和固定菜单(显示:无),如果我滚动页面直到重新定义形式固定菜单使它看起来很好,但是如果我的结果在768px下我的固定菜单没有'当我滚动页面直到我刷新时工作..
编辑:我没有看到问题..问题是顶级导航菜单(超级菜单),如果我删除它我的代码工作,但我必须解决不删除
JS
$(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
$(window).scroll(function() {
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-otel-giris").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;
}
}
/**
* sticky border
*/
.oteller-sticky{
border-bottom:1px solid #faa82b;
}
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-->