jquery - 使用 CSS 重新定位一个 div

Question

我试图让我的菜单栏在向下滚动时从顶部重新定位到屏幕的左侧，我希望菜单元素向下滑动到左侧位置(就像 Macromedia Flash 中的补间动画)

我尝试了很多 CSS 片段，但没有一个有效。这是检测滚动的 JQuery 代码:

$(document).ready(function() {  
var stickyNavTop = $('.nav').offset().top;  

var stickyNav = function(){  
    var scrollTop = $(window).scrollTop();  

    if (scrollTop-500 > stickyNavTop) {     
        $('#nav').addClass('sticky');
        } else {  
        $('#nav').removeClass('sticky');
    }  
};  
stickyNav();  
$(window).scroll(function() {  
    stickyNav();  
});  

});

CSS:

.sticky {
    position: fixed;  
    width: 250px;
    margin-left: 50px;
    margin-top: 200px;
    left: 0;  
    top: 0;  
    transition: .4s ease-out;   
}

这里不起作用的是 div 只是闪烁到左侧(没有滑动)。有没有办法用 CSS 做到这一点？或者是否有任何插件可以让我这样做。 http://jsfiddle.net/h2ULn/18/

Answer 1

您正在为导航混合使用 ID (#) 和类 (.) 选择器。是 class="nav" 还是 id="nav"？

您没有看到转换的最可能原因是您没有为您正在测试的浏览器提供特定于浏览器的重载:

.sticky {
    position: fixed;  
    width: 250px;
    margin-left: 50px;
    margin-top: 200px;
    left: 0;  
    top: 0;  
    -moz-transition: .4s ease-in;
    -o-transition: .4s ease-in;
    -webkit-transition: .4s ease-in;
    transition: .4s ease-in;
}

您可能遇到的另一个可能的问题是 nav 的样式对于您正在做的事情不正确，我无法在没有看到更多代码的情况下对其进行验证。您可能希望它也有 position: fixed，位于屏幕外的某个地方。

我也不完全清楚您期待什么样的动画。它应该从顶部飞进来吗？还是从顶部和侧面？它也正在调整大小吗？所有在转换前后通用的样式都应该在 .nav 的样式表中，只有在 .sticky 中应该为转换更改的内容。

这是一个简化的 Fiddle，显示了一个在您向下滚动页面时从左侧滑入的 div:http://jsfiddle.net/DacY8/1/