- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试使用著名的 Keith Clark 纯 css 视差页面教程 (http://blog.keithclark.co.uk/pure-css-parallax-websites/)。
到目前为止,还不错。当我想将它与带有 jQuery 平滑滚动的导航栏结合使用时,问题就来了。
当页面已经滚动时会出现问题。所以基本上,它从顶部精确地滚动到我希望它滚动的位置,但如果页面在产品或联系人上向下滚动,它会滚动到奇怪的地方。
我为此尝试了很多不同的代码片段,但它似乎就是不想工作!
HTML
导航:
<ul class="nav navbar-nav navbar-right">
<li><a href="#group2">Home</a></li>
<li><a href="#group3">About</a></li>
<li><a href="#group5">Products</a></li>
<li><a href="#group7">Contact</a></li>
</ul>
正文:
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">START</div>
</div>
</div>
<div id="group3" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">ABOUT</div>
</div>
</div>
<div id="group4" class="parallax__group">
<div class="parallax__layer parallax__layer--deep">
<div class="title">RANDOM PICTURE</div>
</div>
</div>
<div id="group5" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">PRODUCTS</div>
</div>
</div>
<div id="group6" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">RANDOM PICTURE</div>
</div>
</div>
<div id="group7" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">CONTACT</div>
</div>
</div>
</div>
J查询:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('.parallax').animate({
scrollTop: target.offset().top
}, 2500);
return false;
}
}
});
});
这是代码中最相关的部分 - 其余部分您可以在 jsfiddle 上找到... http://jsfiddle.net/mgLzejad/1/
检查代码,看看是否能找到错误 - 我找不到......
最佳答案
这是 jsfiddle:http://jsfiddle.net/mgLzejad/2/
target.offset().top
是根据 $('.parallax')
滚动量的相对值。要修复 scrollTop 值,请添加 $('.parallax')
scrollTop: $(target).offset().top + $('.parallax').scrollTop()
关于javascript - 带有纯 css 视差的 Jquery 滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25752135/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!