jquery - 使用固定定位动画移动导航

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