Javascript Jquery使用纯css视差滚动不';行不通
我正在尝试使用著名的Keith Clark教程来学习纯css视差页面() 到目前为止,一切顺利。当我想将它与带有jQuery平滑滚动的导航栏结合使用时,问题就出现了 当页面已经滚动时,问题就会出现。所以基本上,它从顶部滚动到我想要滚动的点,但是如果页面在产品或联系人上,它会滚动到奇怪的地方 我已经尝试了很多不同的代码片段,但它似乎只是不想工作 HTML 导航:Javascript Jquery使用纯css视差滚动不';行不通,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用著名的Keith Clark教程来学习纯css视差页面() 到目前为止,一切顺利。当我想将它与带有jQuery平滑滚动的导航栏结合使用时,问题就出现了 当页面已经滚动时,问题就会出现。所以基本上,它从顶部滚动到我想要滚动的点,但是如果页面在产品或联系人上,它会滚动到奇怪的地方 我已经尝试了很多不同的代码片段,但它似乎只是不想工作 HTML 导航: <ul class="nav navbar-nav navbar-right"> <li><a h
<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>
这是您可以在JSFIDLE上找到的代码rest中最相关的部分。。。
检查代码,看看是否能找到错误-我不能…这是JSFIDLE:
target.offset().top
是根据滚动的$('.parallax')
的多少而确定的相对值。要修复scrollTop值,请添加当前滚动值$('.parallax')
<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>
$(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;
}
}
});
});
scrollTop: $(target).offset().top + $('.parallax').scrollTop()