本文介绍了一种使用CSS解决锚点定位时，内容被顶部元素遮挡的问题。通过设置适当的边距和背景色，确保链接能够正确指向内容区域。同时，文章还展示了如何使用JavaScript实现滚动时自动高亮导航菜单项。
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
background-color: #888;
}
li {
list-style: none;
}
#content {
width: 1000px;
margin: 0 auto;
padding-top: 0;
padding-bottom: 300px;
}
/*请补充此处代码，让右侧广告正确显示*/
.item{
margin: 0 0 100px 125px;
border-top:100px solid #888; padding-left: 170px;}
#content #item1 {
background: url("http://img1.sycdn.imooc.com/536c9ea800013ae610000540.jpg") no-repeat center top;
}
#content #item2 {
background: url("http://img1.sycdn.imooc.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
}
#content #item3 {
background: url("http://img1.sycdn.imooc.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
}
#content #item4 {
background: url("http://img1.sycdn.imooc.com/536c9f6700012e9010000540.jpg") no-repeat center top;
}
#content #item5 {
background: url("http://img1.sycdn.imooc.com/536c9f800001b28510000540.jpg") no-repeat center top;
}
/*请补充此处代码，让导航菜单在左侧绝对定位显示*/
#menu{position: fixed;
left: 100px;
top: 100px;
}
#menu h1 {
color: #fff;
font-size: 14px;
text-align: center;
background: #ee1111;
line-height: 30px;
}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 12px;
color: #ccc;
width: 160px;
padding: 10px 20px;
text-decoration: none;
text-align: left;
border-bottom: 1px dashed #999;
}
#menu ul li a strong {
color: #f1f1f1;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #666;
}
/*ie6 hack*/
* html, * html body {
background-image: url(about:blank);
background-attachment: fixed;
}
* html #menu {
/*position: fixed;*/
position: absolute;
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
}
$(document).ready(function () {
$(window).scroll(function () {
var top = $(document).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
var currentId="";
// 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点
items.each(function(){
if(top>$(this).offset().top-330){
currentId="#"+$(this).attr("id");
}else{return false;}
});
var currentLink= menu.find(".current");
if(currentId&¤tLink!=currentId) {
currentLink.removeClass("current");
menu.find("[href=" + currentId + "]").addClass("current");
}
});
});
我的解决办法是将border-top扩大，颜色设置为背景色 ，想问下有没有更好的办法？
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
