Question

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

链接到下面的小提琴。我试图尽可能地添加代码，但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会将该元素从正常文档流中取出，从而降低文档的高度，从而将文档向上滚动，从而将导航栏恢复到正常定位。你仍然在整个时间滚动，所以循环反复运行，导致跳跃。修复非常简单：插入一个占位符，当导航栏固定时，该占位符将填充该空间。

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 /固定菜单宽度在滚动到某个点时更改和跳转

1 个答案: