网站导航是通栏的,但是也没主体居中,是固定长度,而导航中的分屏切换按钮arrow却不在主体区域,这样如果定位不对在IE浏览器下存在不显示按钮的问题,
[CODE]
<div class="nav">
<div class="navin">
<a title="美丽如花" href="#tag-c01" class="selected">美丽如花</a><a title="情感天地" href="#tag-c02" class="">情感天地</a><a title="血拼购物" href="#tag-c03" class="">血拼购物</a><a title="聪慧女人" href="#tag-c04" class="">聪慧女人</a><a title="休闲时光" href="#tag-c05" class="">休闲时光</a><a title="美眉游戏" href="#tag-c06" class="">美眉游戏</a>
<div class="arrow" style="background: url("img/20120303/arrowUp.png") no-repeat scroll 0pt 0pt transparent;"></div>
</div>
</div>
[/CODE]
为此注意CSS的定义方式:
.navin a{
font-family:Microsoft YaHei;
font-size:24px;
color:#b24097;
padding:32px 0 39px;
height:24px;
line-height:24px;
text-align:center;
width:158px;
display:inline-block;
/*此处采用 display:inline-block;不能用浮动 float:left;,否则.arrow消失,用float则需要.navin的IE6 hack:_width:>950px; 撑开 或者给.arrow清除浮动clear:float;*/
}
2.jQuery的滑动滚动效果可以用扩展插件jquery.easing.还有一些阴影效果、圆角效果除了用图片实现外,可以考虑用PIE插件,使IE6-8支持html5/CSS3 部分新特性。
3.熟悉锚点定位方式,如果要实现滑动定位锚点的效果,可以先阻止默认事件,再用jQuery动画函数呈现。
[code]
$(window).load(function() {
times = 0;
//get content container positions
bk01_top = ($('.bk01').offset().top );
bk02_top = ($('.bk02').offset().top );
bk03_top = ($('.bk03').offset().top );
bk04_top = ($('.bk04').offset().top );
bk05_top = ($('.bk05').offset().top );
bk06_top = ($('.bk06').offset().top );
//main menu fixed position on scroll
$(window).scroll(function () {
moveMenu();
});
//anchor smooth scrolling
function filterPath(string) {
return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
$('.navin > a').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'')) {
var $target = $(this.hash), target = this.hash;
if (target) {
$(this).click(function(event) {
event.preventDefault();
var targetOffset = $target.offset().top;
$('html, body').animate({scrollTop: targetOffset}, 2000, 'easeInOutSine', function() {
location.hash = target;
});
});
}
}
});
//put menu in the right place
moveMenu();
});
[/code]
说明:JavaScript location 对象
location.host 与 location.hostname 的区别:
location.host 包含端口,比如是 127.0.0.1:81。如果端口是 80,那么就没有端口,就是 127.0.0.1。
location.hostname 不包含端口,比如是 127.0.0.1。
location -- location用于获取或设置窗体的URL,并且可以用于解析URL,是BOM中最重要的对象之一
- location,中文"位置"的意思
- 引用网址:http://www.dreamdu.com/javascript/window.location/
- location既是window对象的属性又是document对象的属性
- location包含8个属性,其中7个都是当前窗体的URL的一部分,剩下的也是最重要的一个是href属性,代表当前窗体的URL
- location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载
详细:http://www.dreamdu.com/javascript/window.location/
4.定位的时候,难免遇到兼容性问题,如果不得不用hack方式解决,那么jQuery代码不能直接操作样式,可能是因为jQuery不认识hack吧。所以涉及到hack的样式操作,最好先放到CSS类中,然后通过jQuery操作该类,来实现需求。
比如下列js代码操作scrolltop类,
[code]
function moveMenu(){
var scroll_top = $(document).scrollTop();
var window_height = $(window).height();
if(scroll_top >= window_height - 95 ){
$(".arrow").css("background","url('img/20120303/arrowUp.png') no-repeat scroll 0 0 transparent");
sign = false;
//为兼容IE6,不可直接写css方法
$(".nav").removeClass("bt");
$(".nav").addClass("scrolltop");
$('.head').css('margin-bottom', '95px');
} else {
$(".arrow").css("background","url('img/20120303/arrowDown.png') no-repeat scroll 0 0 transparent");
sign = true;
$(".nav").removeClass("scrolltop");
$(".nav").addClass("bt");
$('.head').css('margin-bottom', '');
}
if(scroll_top < window_height){
resetMenu();
}
scroll_top = scroll_top+1;
if(scroll_top > bk01_top){resetMenu();$('.navin a:nth-child(1)').addClass('selected');}
if(scroll_top > bk02_top){resetMenu();$('.navin a:nth-child(2)').addClass('selected');}
if(scroll_top > bk03_top){resetMenu();$('.navin a:nth-child(3)').addClass('selected');}
if(scroll_top > bk04_top){resetMenu();$('.navin a:nth-child(4)').addClass('selected');}
if(scroll_top > bk05_top){resetMenu();$('.navin a:nth-child(5)').addClass('selected');}
if(scroll_top > bk06_top){resetMenu();$('.navin a:nth-child(6)').addClass('selected');}
}
[/code]
//CSS code
.scrolltop{
position:fixed;
top:0;
_position:absolute;
_top:expression(documentElement.scrollTop + 0 + "px");
}
同时使用js操作的CSS样式属性,最好事先不在CSS文件写死。需要设置的,可以写在html文件中,方便js操作增删、修改属性值,保证页面用户体验的稳定性。
我的专题页面分屏涉及到导航在顶端和底端的切换效果,这里定位用的是position:fixed; 而这一属性在IE6下是不兼容的,需要通过Hack方式或js解决。 我是通过CSS hack保持各浏览器兼容的。如::.bt的属性不写在scrolltop内部,而单独分离出来自成一类,方便js调用修改该属性。
.nav {
width:100%;
background:url("../img/20120303/bgnav.png") repeat-x scroll 0 0 transparent;
z-index:6;
position:fixed;
_position:absolute;
_top:expression(documentElement.scrollTop + 560 + "px");
}
.bt{
bottom:0;
}
好了。ok,到此为止,标记。