有问题的jQuery导航栏弹出窗口

Buggy jQuery Navbar Popout

本文关键字：窗口 导航 jQuery 有问题      更新时间：2023-09-26

我有一个导航栏，当你滚动页面时会弹出并保持在顶部，但问题是当你从页面上滚动到弹出页面的其余部分时，页面的其余部分会跳起来一点。

这是jquery：（请原谅回声的）

echo "<script type='text/javascript'>";
    echo "$(function() {";
        // grab the initial top offset of the navigation 
        echo "var sticky_navigation_offset_top = $('#navbar_container').offset().top;";
        // the function that decides weather the navigation bar should have "fixed" css position or not.
        echo "var sticky_navigation = function() {";
            echo "var scroll_top = $(window).scrollTop();"; // our current vertical position from the top
            // if we've scrolled more than the navigation, change its position to fixed to stick to top,
            // otherwise change it back to relative
            echo "if (scroll_top > sticky_navigation_offset_top) {";
                echo "$('#navbar_container').css({ 'position': 'fixed', 'top':0, 'left':0 });";
            echo "} else {";
                echo "$('#navbar_container').css({ 'position': 'relative' });";
            echo "}";   
        echo "};";
        // run our function on load
        echo "sticky_navigation();";
        // and run it again every time you scroll
        echo "$(window).scroll(function() {";
        echo "sticky_navigation();";
        echo "});";
    echo "});";
echo "</script>";

如果你真的慢慢地向下滚动一点让它弹出并看着页面的正文跳起来一点，我试图让它不发生，所以它弹出时真的很流畅。（它碰巧弹出并重新出现）。

我认为这是因为导航在向下滚动时position: fixed;设置，这意味着它不再嵌入页面中，这意味着整个页面失去了那么多高度，这导致它"跳起来"。（希望这是有道理的。

尝试将其调整为如下所示的内容：

echo "if (scroll_top > sticky_navigation_offset_top) {";
    echo "$('#navbar_container').css({ 'position': 'fixed', 'top':0, 'left':0 });";
    echo "$('body').css({ 'margin-top': 45});";
echo "} else {";
    echo "$('#navbar_container').css({ 'position': 'relative' });";
    echo "$('body').css({ 'margin-top': 0});";
echo "}";

更好的是，使用bootstrap，它也可以迎合移动设备！ 他们的"固定顶部"示例展示了一个始终保持在顶部的菜单！

固定顶部示例，引导程序

将导航栏放入另一个容器中 - 为该容器提供固定高度，然后它就不会再弹出

<div class="navbar_surrounding">
<div id="navbar_container" style="position: relative;">
...
</div>
</div>

.css

.navbar_surrounding {
    display: block;
    height: 45px;
    width: 100%;
}
相关文章：