![](/img/trans.png)
[英]How can I make my navigation bar (which has transparent background) to float/overlap my background in a parallax-scrolling webpage?
[英]How can I make a highlight in the navigation bar of a horizontal webpage?
我似乎找不到关于此主题的任何询问的问题。 我使用了平滑滚动系统制作了一个水平网页。 我唯一缺少的是在导航栏中突出显示,以便您可以看到自己在网站上的位置。 这是网站的最大部分,也是我正在努力做的事情
$(function(){
var sections = {},
_width = $(window).width(),
i = 0;
// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().left;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollLeft();
for(i in sections){
if(sections[i] >= pos && sections[i] <= pos + _width){
$('a').removeClass('active');
$('#nav_' + i).addClass('active');
}
}
});
});
我不知道如何突出显示菜单,以便您可以看到自己所在的位置。 请帮助我解决这个问题,我已经尝试了几个演示,但是我无法弄清楚。
我在头中使用的脚本是:
<script src=" http://s3.sitepoint.com/examples/sidescroll/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".menubar a").bind("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
如果将节更改为数组而不是对象,则可以执行以下操作
$(function(){
var sections = [],//change to array []
_width = $(window).width();
$('.section').each(function(){
sections.push($(this).offset().left);//you can use push
});
var $document=$(document);//you can create a variable outside the scroll event
$document.scroll(function(){
var pos = $document.scrollLeft();
$.each(sections,function(i,n){// loop for each section
if(n >= pos && n <= pos + _width){
$('a').removeClass('active');
//change #nav_ for #nav_section
//add 1 to i as you start with nav_section1
$('#nav_section' +(i+1)).addClass('active');
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.