如何防止滚动时此导航栏的高度增加

How can I prevent the height of this navbar increasing when I scroll?

本文关键字：高度 增加 导航 何防止 滚动      更新时间：2023-09-26

我有一个使用jQuery定位的浮动水平导航栏。当页面是静态的时，这是完美的，但是一旦我开始滚动，导航栏的高度就会增加，我不确定为什么。

我这里有一个 JSFiddle 来显示不需要的效果

这是 html

<div id="stickyribbon">
    <ul>
        <li><a href="1_Lesson.html" target="_blank">Week1</a>
        </li>
        <li><a href="2_Lesson.html" target="_blank">Week2</a>
        </li>
        <li><a href="3_Lesson.html" target="_blank">Week3</a>
        </li>
        <li><a href="4_Lesson.html" target="_blank">Week4</a>
        </li>
        <li><a href="5_Lesson.html" target="_blank">Week5</a>
        </li>
        <li><a href="6_Lesson.html" target="_blank">Week6</a>
        </li>
    </ul>
</div>

这是 css

#stickyribbon {
    width:800px;
    background: orange;
    border-radius: 5px;
}
#stickyribbon ul {
    display:table;
    width:100%;
    list-style-type: none;
}
#stickyribbon li {
    display:table-cell;
    font-size: 16px;
    font-weight: bold;
    vertical-align:middle;
}
#stickyribbon li a {
    display:block;
    color: #fff;
    text-decoration: none;
}
#stickyribbon li a:hover {
    color: yellow;
}

最后是JavaScript

$(function () {
    var stickyRibbonTop = $('#stickyribbon').offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyRibbonTop) {
            $('#stickyribbon').css({
                position: 'fixed',
                top: '0px'
            });
        } else {
            $('#stickyribbon').css({
                position: 'static',
                top: '0px'
            });
        }
    });
});

我将不胜感激任何指导，因为我完全被难住了。蒂亚

您可以将CSS更改为以下内容，至关重要的是，您需要正确定义定位，填充和边距以在两种状态下建立布局：

演示小提琴

#stickyribbon {
    width:800px;
    background: orange;
    border-radius: 5px;
    position:static;
    top:0;
    margin:15px 0;
}
#stickyribbon ul {
    display:table;
    width:100%;
    list-style-type: none;
    padding:0;
    margin:0;
}
#stickyribbon li {
    display:table-cell;
    font-size: 16px;
    font-weight: bold;
    vertical-align:middle;
    padding:0 40px;
}
#stickyribbon li a {
    display:block;
    color: #fff;
    text-decoration: none;
}
#stickyribbon li a:hover {
    color: yellow;
}
div

#stickyribbon 有一些边距，当页面滚动时，div 被重新绘制以填充该边距。加保证金：0;#stickyribbon ul 和 #stickyribbon Li。

相关文章：