JavaScript 启用滚动修复导航栏问题答案

【问题标题】：JavaScript Enabled Scroll Fixed Nav Bar TroubleJavaScript 启用滚动修复导航栏问题
【发布时间】：2014-02-24 00:26:37
【问题描述】：

我有一个启用 JavaScript 的滚动导航栏。它从英雄图形下方开始，然后在到达顶部时粘在顶部。但是，它完美地工作，当它到达顶部时，它会导致它下面的 div 捕捉到顶部而不是顺利到达那里。很难解释所以这里是代码。

我知道发生了什么：一旦导航栏到达顶部，它就会堆叠在 div 上方，导致 div “跳跃”。我只是不知道如何使它更流畅。

这是代码，感谢您的想法！

<body>
    <div class="home-hero-image">
            <h1>Assemble</h1>
    </div>

    <div class="header">
        <div class="header_container">
            <div class="header_onecol">
                <ol>
                <li class="links">Blog</li>
                <li class="links">Members</li>
                <a href= "/Technology/index.html"><li class="links">Technology</li></a>
                <li class="links">Contact Us</li>
                </ol>
            </div>
        </div>
    </div>


    <div class="intro">
        <p class="maintext">
            We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
        </p>
    </div>
</body>

body {
    font-family: Helvetica, Arial, Sans-serif;
    font-style: normal;
    font-weight: 200;
    color: #888888;
    margin: 0;
    padding: 0;
    font-size: 100%;
    display: block;
    text-align: center;
}

p {
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

.home-hero-image {
    height: 250px;
    background: url('../images/hero_image.jpg') no-repeat;
    z-index: -1;
}

h1 {
    color: white;
    float: right;
    padding-right: 5%;
    font-size: 5em;
}

.header {
    height: 77px;
    position: relative;
    clear: both;
    background-color: white;
    border-bottom: 1px solid gray;
    border-top: 1px solid gray;
}

.fixed {
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  padding-bottom: 7px;
  z-index:999;
}

.header_container {
    width: 75%;
    margin: 0 auto;
    padding: 0 12px;
}

.header_onecol {
    width: 97%;
    height: 40px;
    margin: 1%;
    display: block;
    overflow: hidden;
    background-image: url('../images/Logo.png');
    background-repeat: no-repeat;
    padding-top: 24px;
}

<script language="javascript" type="text/javascript">
    var win      = $(window),
        fxel     = $(".header"),
        eloffset = fxel.offset().top;

    win.scroll(function() {
        if (eloffset < win.scrollTop()) {
            fxel.addClass("fixed");
        } else {
             fxel.removeClass("fixed");
        }
    });
</script>

【问题讨论】：

标签： javascript css scroll fixed navbar

【解决方案1】：

当一个 div 被固定后，它将不再占用“空间”，这意味着下一个 div 将完全按照您的描述进行 - 在顶部附近堆叠。

考虑使用 div 将所有内容包装在标题之后：

<div class="header">
    ...
</div>

<div class="main-body">
    <div class="intro">
        <p class="maintext">
            We are dedicated to delivering the latest information on current threats, to provide industry best practices, and to enhance every public sector IT professional's understanding of cybersecurity by opening direct conversations between the government and IT community.
        </p>
    </div>
</div>

我们在修复header的时候，可以给main-body div加上等于header高度的top-padding，防止它跳动。

var win      = $(window),
    fxel     = $(".header"),
    eloffset = fxel.offset().top;

win.scroll(function() {
    if (eloffset < win.scrollTop()) {
        $(".main-body").css("padding-top", fxel.height());
        fxel.addClass("fixed");
    } else {
        $(".main-body").css("padding-top", 0);
        fxel.removeClass("fixed");
    }
});

JSFiddle here

希望这会有所帮助！

【讨论】：

你是个天才！我不知道我可以用 JS 添加填充。非常感谢！