滚动标题应按照jQuery中的指示滑动/向上滑动,但是,在移动iOS中,这不会发生并且标题在屏幕顶部抖动？
这适用于大型浏览器上的Chrome,Mozilla Firefox,Internet Explorer和Safari.
这是因为滚动顶部方法的错误使用而发生的吗？我该如何纠正？
jQuery(document).ready(function ($) {
var lastScrollTop = 0;
$(window).scrollTop(0);
$(window).on('scroll', function() {
var header = $('header');
var content = $('content');
var headerBg = $('.header-bg');
var headerCnt = $('.header-content');
var scrollTop = $(window).scrollTop();
var dynHeaderVisible = false;
if (lastScrollTop > scrollTop) {
if (scrollTop <= 400) {
headerBg.css("height", 0);
headerCnt.css('color', 'white');
} else {
headerBg.css("height", 80);
headerCnt.css("height", 80);
headerCnt.css('color', 'black');
}
} else {
// Down
if (scrollTop > 350) {
console.log ("hi");
headerCnt.css("height", 0);
headerBg.css("height", 0);
}
}
lastScrollTop = scrollTop;
});
$.fn.isOnScreen = function(){
var element = this.get(0);
var bounds = element.getBoundingClientRect();
return bounds.top < window.innerHeight && bounds.bottom > 0;
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
background:transparent;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: .3s color;
transition: .3s height;
}
header {
display: block;
position: fixed;
height: 80px;
width: 100%;
}
header ul {
z-index: 20;
}
.header-wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: transparent;
}
.header-bg,
.header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.header-bg {
z-index: 100;
color: gray;
background-color: white;
border-bottom: 1px solid black;
transition: .3s height;
height: 0;
}
.header-content {
z-index: 200;
transition: .3s color;
color: white;
background-color: transparent;
height: 80px;
transition: .3s height;
overflow: hidden;
list-style: none;
}
.logo {
position: absolute;
left: 47%;
color: inherit;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
font-size:.8em;
letter-spacing:0.05em;
transition: .3s color;
}
Tags | 热门标签
RankList | 热门文章
-
1Laravel 5.1 Eloquent ORM随机返回不正确的关系 - *主要更新*
-
2没有给出与所需的形式参数相对应的参数-.NET错误
-
3如何使<td>响应
-
4如何从IntelliJ IDEA向远程Spark集群提交代码
-
5"控制到达非空函数的结束",在枚举类型上使用完全处理的情况切换
-
6比较数组对象是否相等
-
7在Python Pandas中连接大量CSV文件(30,000)
-
8在"if"中遇到"return"时不返回值的方法
-
9NoReverseMatch Django教程1.8第4章
-
10如何在按钮内居中对齐离子图标？
-
11将大量自定义数据添加到jpg图像文件中
-
12Java Server包装器（tanuki）-启动失败：等待JVM发出的信号超时
-
13特定键的映射中的值的总和
-
14像Lmax Disruptor一样可以批量观察
-
15woocommerce webhooks没有解雇
-
16while循环使用嵌套的if语句--C
-
17IPython Notebook：在下一步之前“实时”显示循环图像
-
18Cython中的并行性不起作用
-
19C＃错误CS1061：类型“ System.Collections.Generic.List <int>”不包含“长度”的定义
-
20Gstreamer:为什么在显示某些过滤器之前我需要一个视频转换？
京公网安备 11010802040832号 | 京ICP备19059560号-6 