6

我的页面有一个固定的顶部导航栏，页面上有几个 id 元素。如果我按下这些 id 元素之一的链接，它会将这个 id 滚动到顶部，但它隐藏在顶部导航栏下。在野外，页面很长，并且有不同的“跳转点”。

我有一个简化的小提琴来显示以下 html的问题

<div id="fixedbar">This is the fixed top bar</div>
<div id="toplinks"><a href="#first">First</a> <a href="#second">Second</a></div>
<p id="first"><strong>First</strong>
    Lorem ipsum dolor sit amet[...]
</p>
<p id="second"><strong>Second</strong>
    Duis autem vel eum iriure dolor[...]
</p>
<div id="bottomlinks"><a href="#first">First</a> <a href="#second">Second</a></div>

这个CSS

body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:2em;
    width:100%
}

我希望单击链接滚动到正确的元素，但补充固定的导航栏。一个可能的解决方案最好只包括 css，但可以包括 javascript 或 jquery（1.9 用于生产）。

感谢您的任何帮助！

4

3 回答 3

10

这是针对此问题的 JavaScript 解决方法。将点击事件绑定到<a>顶部链接和底部链接，在点击事件上找到目标<p>偏移量并使用javascript滚动到它。

$("#toplinks, #bottomlinks").on('click','a', function(event){ 
    event.preventDefault();
    var o =  $( $(this).attr("href") ).offset();   
    var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height
    // compute the correct offset and scroll to it.
    window.scrollTo(0,sT);
});

小提琴：http: //jsfiddle.net/AnmJY/1/

于 2013-02-28T15:54:54.557 回答
1

修改后的 JS：

 $("#toplinks a").click(function() {
    var id =  $(this).attr('href');
     $('html, body').animate({         
         scrollTop: $(id).offset().top-40
     }, 1000);
 });

修改后的 CSS：

body{padding:0;margin:0}
#toplinks{padding-top:2em}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:40px;
    width:100%
}

小提琴：http: //jsfiddle.net/xSdKr/

40(px) 是菜单高度，1000 是执行动画的时间（以毫秒为单位）。

JS 解决方案比纯 CSS 优雅得多，主要是因为它可以将元素保持在适当的位置，而没有任何可能会干扰您的网站样式的人工填充。它还包括动画——人们通常会发现平滑过渡比使用纯 CSS/HTML 的 insta-flips 更容易接受，因为它们更容易跟踪页面内容和您的确切位置。缺点是如果有人#first在 URL 中使用 - 他会看到菜单与标题重叠。

于 2013-02-28T15:52:57.080 回答
0

你可以作弊一点。

http://jsfiddle.net/vyPkA/

body{padding:0;margin:0}
#toplinks{padding-top:2em; margin-bottom: -40px;}
#fixedbar{
    position:fixed;
    background-color:#ccc;
    height:2em;
    width:100%;
}
#first, #second{
    padding-top: 40px;
}
于 2013-02-28T15:48:33.640 回答