用CSS重新定位div

我想让菜单栏自动从屏幕的顶部移动到屏幕的左侧，向下滚动时，我想要菜单元素向下滑动到左侧位置（如Macromedia中的补间动画Flash）用CSS重新定位div

我已经尝试了很多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工作在这里的是，格只是闪烁左侧（无滑动）。有没有办法用CSS来做到这一点？或者是否有任何插件允许我这样做。 http://jsfiddle.net/h2ULn/18/

来源

2014-01-22 Ouerghi Yassine

我希望你这块JS之前已经定义的变量'scrollTop'和'stickyNavTop' ，对？ – Joeytje50

是的，我做了..编辑 –

您正在混用用于导航的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/

来源

2014-01-22 01:41:10 Grinn

谢谢你的回复，是的，我有class =“nav”和id =“nav”，我只是现在试着在铬上，所以我没有打扰包括所有其他浏览器，什么在这个例子中，你给我的确是我想要的，它是一个菜单导航，所以它在开始时是可见的，而且当你向下滚动导航时，也会滑向浏览器的左侧。 –

@yassine_hell我更新了小提琴。这更接近你想要完成的事情吗（或者它至少让你足够接近？） – Grinn

是的，谢谢，它非常接近，帮助我很多，谢谢。 –

用CSS重新定位div

回答

相关问题