Question

我有一个简单的jQuery脚本，当页面向下滚动100 px时，会在ul上更改类，将菜单从居中移动到float: right，并使用CSS过渡进行平滑移动。这可能吗？

我的剧本：

 $(document).on("scroll",function(){
if($(document).scrollTop()>100){
    $("#nav").removeClass("stick-menu-top").addClass("stick-menu");
} else{
    $("#nav").removeClass("stick-menu").addClass("stick-menu-top");
}
});

我的2个课程：

ul.stick-menu-top { float:none; margin:0 auto; width:614px; padding:17px 0 0; }
ul.stick-menu { float:right; width:614px; padding:17px 0 0; }

我的CSS动画：

    #nav.stick-menu-top, #nav.stick-menu-top a, #nav.stick-menu-top ul, #nav.stick-menu-top li{ transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; }

我真的很感激任何帮助。您可以在此处查看该网站：http://www.thoriumdocumentary.com/redesign/

Answer 1

将其添加到类中：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

如果这对你不起作用，你可以试试jquery ui switchClass（）： http://jqueryui.com/switchClass/

Answer 2

可以转换并在W3C site和float找到的属性列表不是其中之一：）

我认为处理这种情况的最佳方法是删除浮动，并通过更改margin-right或left（这与position:relative结合使用来定位菜单项）菜单容器和它的父亲）在jQuery的帮助下。

例如：

$(document).ready(function(){

    // before the scroll
    $('#menuContainer').css('margin-right',($(window).width() - $('#menuContainer').width())/2 + 'px');

    // after scroll
    $('#menuContainer').css('margin-right',($(window).width() - $('#menuContainer').width()) + 'px');
})

CSS转换不适用于jQuery类替换

2 个答案: