jQuery Snap/Fixed 滚动到某个点时菜单宽度变化和跳转

Question

我有一个水平导航，当导航的顶部属性位于页面顶部时，我会锁定固定在页面顶部。但是，当导航到达页面顶部时，它会增加宽度并且会跳动。一旦我向下滚动一点，这种现象就会停止。请注意，向上滚动时也会发生同样的事情。换句话说，当导航顶部到达页面顶部时，会发生宽度变化跳跃。

Link 到 fiddle 下面。我尽我所能添加代码，但 SO 一直在抱怨它。

jsfiddle

HTML

<div id="container">
    <div class="phone-number">
    ...
    </div>
    <div id="phone-sub-text">
        ...
    </div>
    <div id="social-media">
        <div>
            <img id="fb-icon" src="img/fb-rect.jpg"/>
            <img src="img/twitter-rect.jpg"/>
        </div>
    </div>
    <h1>
    ...
    </h1>
        <div id="float-nav-bar"></div>
        <div id="main">
            <header>
                ...
            </header>
            <header class="sub-header">
                ...
            </header>
            <div id="main-content-top" class="main-content">
                <section>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                </section>
                <figure>
                    <img src="#" />
                </figure>
            </div>
            <header>
                ...
            </header>
            <header class="sub-header">
                ...
            </header>
            <div id="main-content-bottom" class="main-content">
                <section>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...
                    <br/>
                    ...                    
                </section>
                <figure>
                    <img src="#">
                </figure>
            </div>
        </div>

        <footer class="container-footer">

        </footer>
</div>
</body>
</html>

JavaScript

$(document).ready(function() {

    var topOfNav = $('#float-nav-bar').offset().top;

    $(window).scroll( function() {
        if ($(this).scrollTop() > topOfNav){ 

            $('#float-nav-bar').addClass('fixed');
        }
        else 
        {

            $('#float-nav-bar').removeClass('fixed');
        }
    });
});

CSS

#container {
    width: 75%;
    margin: auto;
}

h1, h2, h3{
    text-align: center;
    font-family: arial;
}

h1 {
    font-size: 36pt;
    margin: 0;
}

h1 a {
    color: inherit;
   text-decoration: none;
}

section {
    width: 60%;
    margin-top: 10px;
}

header {
    margin-top: 10px;
    font-size: 20pt;
    color: rgb(0, 64, 135);
}

.container-footer {
    height: 100px;
    background-color: rgb(0, 137, 96);
    margin-top: 40px;
}

.fixed {
    position: fixed;
    top: 0;
    width: inherit;
}

#float-nav-bar {
    height: 100px;
    background-color: #ccc;
}

Answer 1

跳动是滚动事件中改变高度的典型案例。在滚动时使导航栏 position: fixed 使该元素脱离正常的文档流，从而降低文档的高度，从而将文档向上滚动，从而将导航栏踢回正常位置。你一直在滚动，所以循环重复运行，导致跳跃。修复相当简单：插入一个占位符，当导航栏固定时将填充 space。

HTML:

<div id="nav-bar-placeholder" class="float-nav-bar"></div>
<div id="float-nav-bar" class="float-nav-bar"></div>

CSS:

.float-nav-bar {
    height: 100px;
}

#float-nav-bar {
    background-color: #ccc;
}

#nav-bar-placeholder {
    display: none;
}

JavaScript:

$(window).scroll(function() {
    if ($(this).scrollTop() > topOfNav){ 
        $('#nav-bar-placeholder').show();
        $('#float-nav-bar').addClass('fixed');
    }
    else 
    {
        $('#nav-bar-placeholder').hide();
        $('#float-nav-bar').removeClass('fixed');
    }
});

有关完整的工作示例，请参阅此 JSFiddle：http://jsfiddle.net/wdgcbnkm/。

jQuery Snap/Fixed 滚动到某个点时菜单宽度变化和跳转

jQuery Snap/Fixed Menu Width Changes and Jumps When Scrolled Past Certain Point

javascript

css

jquery

scroll

css-position