滚动标题应按照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 | 热门文章
-
1在pandas DataFrame中重新排序MultiIndex的级别
-
2为什么浮子和整数=南？在去
-
3如何在Rstudio Markdown中使用来自全局环境的对象
-
4$ _POST []的默认值;
-
5document.getElementById因未知原因返回null
-
6Docker分离模式
-
7Null对象模式是否占用内存
-
8用Laravel的Elixir(Gulp)编译Zurb Foundation 6
-
9Python无论如何
-
10Rails MySQL ILIKE查询
-
11在ggplot的geom_density()中为每个分位数填充不同的颜色
-
12Codeigniter加载不同的数据库配置
-
13使用CSS中的:before伪元素创建形状
-
14如何在python中绘制列表的条形图
-
15为什么Json.NET需要System.Xml.Linq v5.0.5来序列化一个简单的对象？
-
16在Windows中安装Clang的问题
-
17Readonly getters VS属性函数
-
18如何从ExcelDNA重新触发GetCustomUI()
-
19如何在iOS9中展示PopOver
-
20WebAPI - 用json发布到字典
京公网安备 11010802040832号 | 京ICP备19059560号-6 