固定定位的移动导航动画

Question

我有一个固定的顶部导航，所以当用户滚动浏览大量内容时，导航棒就像固定定位一样应该做。这可行，但是对于页面的移动版本，我需要一个额外的导航从左侧滑出并填满屏幕。我还需要整个网站在附加导航滑入的同时向右移动。现在固定的顶部导航不会移动，因为它是固定的。我可以将其定位 onClick 更改为相对或绝对，但如果您在页面上进一步查看内容，则主导航将在 onClick 消失，因为它不再固定。

这是 Jfiddle http://jsfiddle.net/vXrEm/1/

再次，我真正想要的是主导航与其余内容一起向右滑动，并且无论您在页面上有多远，它都能正常工作并看起来处于相同的位置。

$('.hitME').click(function () {
        if (!$('.siteContainer').hasClass('clicked')) {
            $('.mobileNav').stop().animate({ right: "0px" }, 450);

            //Below code will move the entire container but not the .nav div because it is fixed positioning
            $('.siteContainer').stop().animate({ left: "100%" }, 450);

            $('.siteContainer').addClass('clicked');
        } else if ($('.siteContainer').hasClass('clicked')) {
            $('.mobileNav').animate({ right: "100%" });

            //Below code will move the entire container but not the .nav div because it is fixed positioning
            $('.siteContainer').stop().animate({ left: "0px" }, 450);

            $('.siteContainer').removeClass('clicked');
        }
    });

Answer 1

我最终将 .nav 放在另一个固定容器中，并将 .nav 位置设为绝对位置，它可以工作...以防万一 > http://jsfiddle.net/vXrEm/2/

 $('.siteContainer, .nav').stop().animate({ left: "100%" }, 450);