锚点定位如何不定位到最顶端？

源自：8-1 编程挑战

锚点定位如何不定位到最顶端？

<!DOCTYPE html>

<html>

<head>

<title>网页定位导航效果扩展案例</title>

<style>

* {

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://img.mukewang.com/536c9ea800013ae610000540.jpg") no-repeat center top;

}

#content #item2 {

background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;

}

#content #item3 {

background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;

}

#content #item4 {

background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;

}

#content #item5 {

background: url("http://img.mukewang.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');

}

</style>

$(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&&currentLink!=currentId) {

currentLink.removeClass("current");

menu.find("[href=" + currentId + "]").addClass("current");

}

});

</script>

</head>

<body>

<ul>

<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>

<li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>

<li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>

<li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>

<li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

我的解决办法是将border-top扩大，颜色设置为背景色，想问下有没有更好的办法？

提问者：qq_无猜_0 2015-05-29 18:18

锚点定位如何不定位到最顶端？

个回答