Question

我有一个固定的顶级导航，因此当用户滚动浏览很多内容时，导航棒就像固定定位那样应该这样做。这适用于页面的移动版本，我需要一个额外的导航从左侧滑出并填满屏幕。我还需要整个网站在向其他导航栏滑入的同时向右移动。现在固定的顶部导航器自固定后不会移动。我可以将它定位onClick定位为相对或绝对，但如果你在页面上查看内容，主导航将在onClick上消失，因为它不再固定。

Heres the 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位置绝对，并且它有效......如果有人关心＆gt; http://jsfiddle.net/vXrEm/2/

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

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

1 个答案: