部分导航

Question

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

  

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

     

标题 - 120px

     

---

     

内容

就像这样发生 - http://www.w3.org/TR/REC-html40/struct/links.html#h-12.2.4 因为我使用的是固定标题。内容正在标题内部进行调整

更新 - 添加了Fiddler

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

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

我要删除的内容：添加填充顶部80px;在content.how之间创建更多空间以使内容可见而不添加填充顶部80px

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

Answer 1

你需要在填充之前用div包装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以获得所需的结果。

Answer 2

最后，我通过在点击事件上动态添加padding-top并在滚动事件触发时将其删除来实现。

调用此onclick：

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

并将标志设置为true;

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

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

Answer 3

嗯，我想在这种情况下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
    });
});

希望这有帮助！