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

这里的dosnt工作原理是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中转换过程中应该更改的内容。

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

用CSS重新定位div

1 个答案: