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

Question

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

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

如果你真的很慢只是稍微向下滚动一下让它弹出并观察页面的主体跳起来一点，我正在努力避免这种情况发生所以它弹出时真的很流畅。 (它突然弹出并返回)。

Answer 1

我觉得是因为navigation在向下滚动的时候设置了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 "}";