Question

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

这是jquery :(原谅回声＆＃39; s）

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>";

如果你真的慢慢向下滚动以使其弹出并观察页面的主体有点跳跃，我试图让它不会发生，所以它真的很顺利，因为它弹出。（它发生了弹出并重新进入）。

Answer 1

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

尝试将其调整为以下内容：

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 "}";

Answer 2

更好的是，使用bootstrap，它也将迎合移动设备！他们的“固定顶部”示例展示了一直保持在顶部的菜单！

Fixed Top example, Bootstrap

Answer 3

将导航栏放入另一个容器 - 将该容器设置为固定高度，然后不再弹出

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

CSS

.navbar_surrounding {
    display: block;
    height: 45px;
    width: 100%;
}

Buggy jQuery Navbar Popout

3 个答案: