啟用JavaScript的滾動固定導航欄出現問題

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>

修復標題時，可以在主體div上添加等於標題高度的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在這里

希望這可以幫助！

啟用JavaScript的滾動固定導航欄出現問題

問題描述

1 個解決方案

解決方案1
0 已采納 2014-02-24 04:49:44

啟用JavaScript的滾動固定導航欄出現問題

問題描述

1 個解決方案

解決方案1 0 已采納 2014-02-24 04:49:44

解決方案1
0 已采納 2014-02-24 04:49:44