引导标头网格布局&;使用jquery的CSS转换在iPad上不起作用&;iPhone
我对WebdevWorld比较陌生,已经采用bootstrap和jquery构建了一个响应性强的网站。我的网站在除iOS以外的所有设备上都运行良好。标题中包含徽标和导航菜单,这就是问题所在。过渡动画非常慢,几乎无法工作(在safari和chrome for iOS上)。而且引导网格布局也不能很好地工作。我的徽标列太大,无法根据网格大小调整大小。下面是标题的代码: HTML:引导标头网格布局&;使用jquery的CSS转换在iPad上不起作用&;iPhone,jquery,html,css,twitter-bootstrap,responsive-design,Jquery,Html,Css,Twitter Bootstrap,Responsive Design,我对WebdevWorld比较陌生,已经采用bootstrap和jquery构建了一个响应性强的网站。我的网站在除iOS以外的所有设备上都运行良好。标题中包含徽标和导航菜单,这就是问题所在。过渡动画非常慢,几乎无法工作(在safari和chrome for iOS上)。而且引导网格布局也不能很好地工作。我的徽标列太大,无法根据网格大小调整大小。下面是标题的代码: HTML: <header id="mainHead"> <div class="container
<header id="mainHead">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4 text-left">
<img class="mainLogo" src="img/logos/logo.png" alt="logo" />
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<ul class="listOptions navigationList text-right">
<li class="listEntryOptions">ABOUT</li>
<li class="listEntryOptions"><a href="#menu">MENU</a></li>
<li class="listEntryOptions"><a href="#reservations">RESERVATIONS</a></li>
<li class="listEntryOptions"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</header>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.mainLogo').addClass("sticky");
}
else{
$('.mainLogo').removeClass("sticky");
}
});
#mainHead {
position: fixed;
z-index: 200;
width: 100%;
top: 0px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #FFFFFF;
box-shadow: 5px 5px 5px #888888;
margin-bottom: 20px;
}
.mainLogo {
margin: 0 auto;
height: 20%;
width: auto;
transition: all 1s ease;
}
.sticky {
margin: 0 auto;
height: 10%;
width: auto;
transition: all 1s ease;
}
CSS:
<header id="mainHead">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-4 text-left">
<img class="mainLogo" src="img/logos/logo.png" alt="logo" />
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<ul class="listOptions navigationList text-right">
<li class="listEntryOptions">ABOUT</li>
<li class="listEntryOptions"><a href="#menu">MENU</a></li>
<li class="listEntryOptions"><a href="#reservations">RESERVATIONS</a></li>
<li class="listEntryOptions"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</header>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.mainLogo').addClass("sticky");
}
else{
$('.mainLogo').removeClass("sticky");
}
});
#mainHead {
position: fixed;
z-index: 200;
width: 100%;
top: 0px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #FFFFFF;
box-shadow: 5px 5px 5px #888888;
margin-bottom: 20px;
}
.mainLogo {
margin: 0 auto;
height: 20%;
width: auto;
transition: all 1s ease;
}
.sticky {
margin: 0 auto;
height: 10%;
width: auto;
transition: all 1s ease;
}
解决iOS设备这些问题的最佳方法是什么?有什么事情我做得不对吗?希望得到任何反馈。谢谢我的第一个倾向是调整滚动功能——它会反复启动——就像每次窗口移动一样,并反复添加
粘性
类
请参阅此演示:
打开控制台,查看演示如何重复启动该函数的日志。除此之外,我真的不知道应该用小提琴来制作什么动画
(编辑为添加——我添加了可怕的css3填充,只是为了提供一个区域滚动的视觉指示器)。sticky类根据页面位置调整徽标图像的大小。其效果是,当我在页面顶部时,徽标图像,以及相应的页眉,会更宽。当我向下滚动时,徽标图像的大小减小,因此页眉宽度变薄。这里有一个类似行为的网站的例子,[link]但是你是对的,我应该用一种更好的方式来处理这个问题,而不是不断地启动滚动功能