Jquery 使用CSS的导航栏高度转换

目前，我正在使用以下JavaScript为我的导航栏设置动画。有没有办法通过CSS转换/动画来实现这一点

$（函数（）{
$（'u#header_nav'）。数据（'size'，'big'）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）{
if（$（'#header_nav'）.data（'size'）=='big'））{
$（'u#header_nav'）。数据（'size'，'small'）；
$（'#标题_nav'）.stop（）.animate({
高度：'78px'
}, 600);
$（“ul#menu主菜单”）.css（“底部”、“35%”）；
}
}否则{
如果（$（'#标题_nav'）。数据（'size'）=='small'）{
$（'u#header_nav'）。数据（'size'，'big'）；
$（'#标题_nav'）.stop（）.animate({
高度：“100px”
}, 600);
$（“ul#menu主菜单”）.css（“底部”、“0”）；
}
}
});
标题导航{
背景：1588cb；
宽度：100%；
高度：100px；
位置：固定；
z指数：2；
排名：0；
左：0；
}
身体{
高度：1000px
}
导航{
高度：100px
}
导航ul{
位置：绝对位置；
底部：0；
边际：0px；
右：0px；
过渡：0.3s；
}





是

现在使用jQuery更改navbar的元素类：

$('nav').addClass('nav-small'); // make navbar small
$('nav').removeClass('nav-normal');

因此CSS将自动设置动画。
是

现在使用jQuery更改navbar的元素类：

$('nav').addClass('nav-small'); // make navbar small
$('nav').removeClass('nav-normal');

因此CSS将自动设置动画。
您可以添加CSS转换，然后添加/删除类

CSS

#header_nav{
    height:100px;
    transition: height .600s ease;
}

#header_nav.scrolled{
    height:78px;
}

#header_nav.scrolled ul#menu-primary-menu{
    bottom:35%;
}

Javascript

$(window).scroll(function(){
   $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});

您可以添加CSS转换，然后添加/删除类

CSS

#header_nav{
    height:100px;
    transition: height .600s ease;
}

#header_nav.scrolled{
    height:78px;
}

#header_nav.scrolled ul#menu-primary-menu{
    bottom:35%;
}

Javascript

$(window).scroll(function(){
   $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});

基本上，不要通过CSS上的ID设置
#header_nav
高度

为导航栏的元素高度添加CSS转换属性，如下所示：

过渡：高度0.4s；
-webkit过渡：高度0.4s

在HTML正文的
style
属性中设置导航栏高度“100px”

脚本如下所示：

function transitionFor(e,p){
    $(e).css('transition',p);
    $(e).css('-webkit-transition',p);
    $(e).css('-o-transition',p);
    $(e).css('-ms-transition',p);
}

transitionFor('#header_nav','height 0.3s');

$(window).scroll(function(e){
    if($(window).scrollTop()<10){ // initial scroll position detected
         $('#header_nav').css('height','100px'); // big
    }else{ // scroll position bigger...
         $('#header_nav').css('height','60px'); // small
    }
});

（e，p）的函数转换{
$（e）.css（'transition'，p）；
$（e）.css（'-webkit transition'，p）；
$（e）.css（'-o-transition'，p）；
$（e）.css（'-ms transition'，p）；
}
转换（“#标题"导航“，“高度0.3s”）；
$（窗口）。滚动（功能（e）{
if（$（window）.scrollTop（）基本上不通过CSS上的ID设置
#header_nav
高度

为导航栏的元素高度添加CSS转换属性，如下所示：

过渡：高度0.4s；
-webkit转换：高度0.4s；

在HTML正文的
style
属性中设置导航栏高度“100px”

脚本如下所示：

function transitionFor(e,p){
    $(e).css('transition',p);
    $(e).css('-webkit-transition',p);
    $(e).css('-o-transition',p);
    $(e).css('-ms-transition',p);
}

transitionFor('#header_nav','height 0.3s');

$(window).scroll(function(e){
    if($(window).scrollTop()<10){ // initial scroll position detected
         $('#header_nav').css('height','100px'); // big
    }else{ // scroll position bigger...
         $('#header_nav').css('height','60px'); // small
    }
});

（e，p）的函数转换{
$（e）.css（'transition'，p）；
$（e）.css（'-webkit transition'，p）；
$（e）.css（'-o-transition'，p）；
$（e）.css（'-ms transition'，p）；
}
转换（“#标题"导航“，“高度0.3s”）；
$（窗口）。滚动（功能（e）{
如果（$（window）.scrollTop（）谢谢，@Pro-Hands.我现在要在我的小提琴上试一下，并返回报告：-）我认为这些都不行。这里有3个不同的类（导航小，导航正常，导航大）.nav-normal和nav-small都有样式，nav-big没有，那为什么要删除该类？而且你从来没有对nav-normal做过任何事情。@fauxserious Oops！我在这里更新了…谢谢你的报道，我没有看到这个东西。：/我在这里遗漏了什么吗？我在这里尝试过：但是失败了。nav-normal从未应用过，所以它永远不需要删除。进一步，小导航将被应用，然后没有什么可以删除它。谢谢你，@Pro-Hands。我现在要在我的小提琴上试试这个并返回报告：-）我认为这些都不管用。你有3个不同的类（小导航、普通导航、大导航）.nav-normal和nav-small都有样式，nav-big没有，那为什么要删除该类？而且你从来没有对nav-normal做过任何事情。@fauxserious Oops！我在这里更新了…谢谢你的报道，我没有看到这个东西。：/我在这里遗漏了什么吗？我在这里尝试过：但是失败了。nav-normal从未应用过，所以它永远不需要删除。进一步，nav small将被应用，然后没有什么可以删除它。您好。非常感谢您的回复。我在这里尝试过：但它失败了。忘记了if语句中的结束括号。它可以工作。实际上，似乎您可以通过函数中的一行来完成此操作。
$（'#header_nav'）。toggleClass（'scrolled'，$（document）.scrollTop（）>0）
Hi。非常感谢您的回复。我在这里尝试过：但失败了。忘记了if语句中的结束括号。它很有效。实际上，似乎您可以通过函数中的一行实现这一点。
$（“#header_nav”）.toggleClass（'scrolled'，$（document.scrollTop（）>0）；
谢谢，@Manoj Kumar获得更好的问题标题：-）没问题，迈克尔。谢谢你，@Manoj Kumar提供了更好的问题标题：-）没问题，迈克尔。