部分导航

Question

我已经实现了部分导航。在我面对一个问题时，我们有一个高度为 120 像素的标题，位置：固定。因为部分导航总是将部分移动到窗口的顶部。一些内容隐藏在里面120px 标题。为此，我将填充设置为 120px。但它看起来很奇怪，因为每个部分都有 120px 的间隙使该部分变得丑陋。如何在不添加填充的情况下使内容可见：120px。

----------------------------------------------- > 点击导航内容标题来到这里并隐藏

标题 - 120 像素

---

内容

就这样发生了 - http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.4 由于我使用的是固定的标头。内容隐藏在标头内

更新 - 添加提琴手

发生了什么：http://jsfiddle.net/rg46D/

我如何解决这个问题：http://jsfiddle.net/rg46D/1/

我要删除的内容：添加上边距 80px；在内容之间创建更多空间。如何在不添加上边距 80px 的情况下使内容可见

 <div id="Home" style="background-color: lightblue; height: 600px;padding-top:80px">

Answer 1

我想在这种情况下 jQuery 可能有用。使用它你可以计算你想要从顶部多少空间

$('.menu a').click(function(e){    
    e.preventDefault();
    var getEle = $(this).attr('href'); 
    var navHeight = 72 // if you want you may calculate it dynamically using jQuery it would be better

    $("body, html").animate({
        scrollTop: ($(getEle).position().top)-navHeight
    });
});

希望这会有所帮助！

Answer 2

最后我通过在点击事件上动态添加 padding-top 并在滚动事件触发时将其移除来做到这一点。

调用这个 onclick ：

$('#id').css('padding-top','100px')

并将标志设置为真；

在滚动事件中检查标志并将其更改回

$('#id').css('padding-top','0px')

Answer 3

你需要在你的部分之前用填充包裹一个 div：

<div class="wrapper">
    <div id="Home" style="background-color: lightblue; height: 600px;">HOme</div>
    <div id="Links" style="background-color: lightgray; height: 600px;">Links</div>
    <div id="about" style="background-color: lightgreen; height: 600px;">about</div>
</div>

并为此类提供填充：

.wrapper {
    padding-top:80px;
}

添加Js：

 $('.menu a').click(function (e) {
    var link = $(this).attr('href');
    $('.wrapper div').css({
        paddingTop: '0',
        marginTop: '0'
    });
    $(link).css({
        paddingTop: '80px',
        marginTop: '-80px'
    });
});

Demo

在所有内页中添加此.wrapper div 以获得所需的结果。