jquery - CSS 转换不适用于 jQuery 类替换

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

我的两门课:

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

可转换的属性列表，可在 W3C site 中找到。 ，并且 float 不是其中之一:)

我认为处理这种情况的最佳方法是删除 float ，并通过更改 margin-right 或 left 来定位菜单项(这与在 jQuery 的帮助下，使用 position:relative 来表示菜单容器及其父容器。

例如:

$(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');
})