- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在滚动后设计了一个粘性导航栏标题,它工作得很好,但如果我的结果大小小于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;
}
}
最佳答案
问题在于 display: none 属性。缩小窗口大小后,您的粘性容器就会被隐藏。但是,当您将浏览器恢复到全窗口时,此属性保持不变。
我建议检查您的 CSS 规则和 JS 对窗口大小调整的处理(如果有)。
编辑:您的标题由于其显示属性而被破坏。 <div style="display: HERE GET'S COMPLICATED;" class="sticky-checkin oteller-sticky">
。调整大小时,它会检索值none,无论窗口大小如何变化,该值都保持设置。然而还有一件事。如果您向下滚动以显示此 header ,则会将其值设置为block。此时,尝试调整窗口大小,标题将保持不变,直到刷新页面。代码太多,我无法正确调试它,因此请尝试隔离负责 header 显示的代码。
关于javascript - 响应式jquery粘性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39329973/
我有一个脚本,允许在向下移动时快速滚动,但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport),则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗? 我专注于 android 浏览器。 最佳答案 不,滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切,但是,不幸的是,检查客户端浏览器我发现没有添加 cookie(平
清理并重建后,Eclipse Problems View 中出现错误标记,尽管一切都应该没问题。 如何消除这种不一致的错误? 最佳答案 在这里,我回答自己接下来的步骤对我有用: 关闭 Eclipse
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
我希望我的 div 调用:如果我向下滚动,top 将粘在顶部,但现在它不会粘在顶部。 我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
早上好,我正在为我的网站制作一个粘性 header ,我已经让它工作了,但它似乎卡入到位,我想要顺利!我该怎么做? 我的网站:http://www.trevorpeters.co.uk/tpwebde
我有一个用于我正在处理的小测试站点的导航栏,我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方,直到您
我的页脚设计为位于页面底部,即使其上方的 div 仅包含少量内容。它直到最近才起作用,我似乎以某种方式破坏了它。你能看看吗? 提前致谢。 CSS: body { margin: 0;
我想在加载时让整个 UI 适合屏幕,但我的页脚没有固定在移动设备上的 View 底部。 在桌面网络浏览器上,它可以完美运行。当我在移动网络浏览器上查看此内容时,页脚位于页面下方,使页面可滚动。它不应该
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时,我可以让页脚粘在页面底部,但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推?一个很好的例子是
我正在尝试实现一个粘性标题,在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来,向下滚动时它会再次隐藏,当您滚动回页面顶部时也会返回到它的原始状态。 这正是我想要的外观/感觉
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件,我对此非常满意,但标题仅出现在一些像素之后,并不总是在顶部可见。有谁知道我如何修改代码以使其始
我目前正在创建一个网站,遇到了一个问题,每当我滚动我的粘性标题时,页面就会跳到下一个元素的底部,有人知道这是为什么吗? 我已经尝试更改页面上基本上所有元素的填充,包括横幅、标题、文本本身,甚至 anc
我创建了一个简单的表格,顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码? 谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
使用我当前的代码,当页面加载时,白色条形标题位于顶部。当你滚动时,它会消失,当你滚动到顶部时,白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
我到处都看到这个问题的变体,但似乎没有一个能解决我的问题。我有一个高大的页面,由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;",暂且称之
我创建了一个 header ,位置设置为粘性,顶部设置为 0。但是,如果我向下滚动页面,标题会在某个时候停止随页面滚动。 我认为这很容易解决,但我太笨了... 我试图删除其他元素,因为我认为它们与标题
我的代码有点卡在粘性 header 上。 如果达到 770px 点,标题将缩小。但是当我尝试在浏览器上进行测试时,这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770),
我是一名优秀的程序员,十分优秀!