2

我有一个简单的 jQuery 脚本，ul当页面向下滚动 100 px 时，它会更改 a 上的类，将菜单从 centered 移动到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/

4

2 回答 2

2

可以在W3C 站点上转换和找到的属性列表，但float不是其中之一 :)

我认为处理这种情况的最佳方法是删除浮动，并在jQuery 的帮助下通过更改margin-right或left（与菜单容器及其父项结合）来定位菜单项。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');
})
于 2013-08-31T03:11:39.033 回答
2

将此添加到类中：

-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/

于 2013-08-31T01:18:29.630 回答