Question

我有一个支持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>

Answer 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>

当我们修复标题时，我们可以将top-padding等于标题的高度添加到主体div中，以防止它跳跃。

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

希望这有帮助！

JavaScript启用滚动固定导航栏故障

1 个答案: