錨點(diǎn)定位如何不定位到最頂端？
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8"/>
? ? <title>網(wǎng)頁定位導(dǎo)航效果擴(kuò)展案例</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;
? ? ? ? }
? ? ? ? /*請補(bǔ)充此處代碼，讓右側(cè)廣告正確顯示*/
? ? ? ? .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;
? ? ? ? }
? ? ? ? /*請補(bǔ)充此處代碼，讓導(dǎo)航菜單在左側(cè)絕對定位顯示*/
? ? ? ? #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>
? ? <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
? ? <script>
? ? ? ? $(document).ready(function () {
? ? ? ? ? ? $(window).scroll(function () {
? ? ? ? ? ? ? ? var top = $(document).scrollTop();
? ? ? ? ? ? ? ? var menu = $("#menu");
? ? ? ? ? ? ? ? var items = $("#content").find(".item");
? ? ? ? ? ? ? ? var currentId="";
// 請補(bǔ)充此處代碼，讓導(dǎo)航菜單實(shí)現(xiàn)在滾動條滾動的時(shí)候自動設(shè)置焦點(diǎn)
? ? ? ? ? ? ? ? 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");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</head>
<body>
<div id="menu">
? ? <h1>正在首發(fā)</h1>
? ? <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機(jī)皇限量搶</a></li>
? ? ? ? <li><a href="#item3"><strong>2014.04.04</strong><br>聯(lián)想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>中興天機(jī)GRAND S II</a></li>
? ? </ul>
</div>
<div id="content">
? ? <div id="item1" class="item">
? ? ? ? <img src="http://img1.sycdn.imooc.com//536ca02800014e7105000400.jpg">
? ? </div>
? ? <div id="item2" class="item">
? ? ? ? <img src="http://img1.sycdn.imooc.com//536ca04b0001dbeb04520519.jpg">
? ? </div>
? ? <div id="item3" class="item">
? ? ? ? <img src="http://img1.sycdn.imooc.com//536ca06200016a4d03950387.jpg">
? ? </div>
? ? <div id="item4" class="item">
? ? ? ? <img src="http://img1.sycdn.imooc.com//536ca0ab0001c89205000400.jpg">
? ? </div>
? ? <div id="item5" class="item">
? ? ? ? <img src="http://img1.sycdn.imooc.com//536ca0830001b17f05000400.jpg">
? ? </div>
</div>
</body>
</html>
我的解決辦法是將border-top擴(kuò)大，顏色設(shè)置為背景色 ?，想問下有沒有更好的辦法？
2017-05-19
這個(gè)效果改成vue的寫法怎么弄!求解
2016-01-15
把你的代碼拷貝到本地測試了一下，才知道你說的啥意思？我試著把圖片最外面的容器也就是id為content的那個(gè)容器的margin-top設(shè)置為100px,就會得到你想要的效果；設(shè)置border-top...為100px ,不方便吧