javascript - Interesting fixed element issue when page scroll down -
i have web page , fixed menu(display:none) , if scroll page until rezervation form fixed menu make appear it's far if resulution under 768px fixed menu doesn't work when scroll page until refresh..
edit: undserstand problem..problem top navigation menu(mega menu) if remove codes work have solve not removing
js
$(function() { if (!$(".hotel-search-box").length) { return false; //check if 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-->
Comments
Post a Comment