JavaScript Enabled Scroll Fixed Nav Bar Trouble

StackOverflow https://stackoverflow.com/questions/21976728

Pergunta

I have a JavaScript enabled scrolling nav bar. It starts below a hero graphic then sticks to the top when it gets to the top. It works perfectly, however, when it reaches the top it causes the div below it to snap to the top instead of smoothly getting there. It's hard to explain so here's the code.

I know what's happening: Once the nav bar reaches the top, it stacks above the div causing the div to "jump." I just can't figure out how to make it smoother.

Here's the code and thanks for your thoughts!

<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>
Foi útil?

Solução

When a div is fixed, it will no longer take up "space", meaning the next div will do exactly as you described -- stack up near the top.

Consider wrapping all of your content after the header using a 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>

When we fix the header, we can add top-padding equal to the height of the header to the main-body div to prevent it from jumping.

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

Hope this helps!

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top