Jquery 在列表项移动的情况下向下滑动导航

我有一个向下滑动的导航，背景色向下滑动，列表项淡入，但不会从顶部向下移动，这就是我想要实现的

通过使用addClass/removeClass添加一个top值必须很简单，但在javascript中似乎无法工作

注意：。导航切换是汉堡图标，它是工作正常的触发器

希望有人能帮助我

Javascript:

// Navigation //

$(function() {
$('.nav-toggle').click(function() {
    event.preventDefault();
    $('nav ul.right-nav').slideFadeToggle(300);
    $('.nav-toggle').toggleClass('is-active');
})
});

$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
    $('nav ul.right-nav').hide();
    $('.nav-toggle').removeClass('is-active');
}
});

$.fn.slideFadeToggle  = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,  easing, callback);
}; 

Html:

使用

函数（事件）

而不是

函数（）

在你的剧本里

$('.nav-toggle').click(function(event) {
        //  code
}

---

演示-

我已经修改了您的jQuery，请检查

//导航//
$（函数（）{
$（'.nav toggle'）。单击（函数（）{
event.preventDefault（）；
$（'右导航李'）。滑动切换（300）；
$（'.nav toggle'）.toggleClass（'is-active'）；
})
});
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>50）{
$（'nav ul.right nav'）.hide（）；
$（'.nav toggle'）.removeClass（'is-active'）；
}
});
$.fn.slideFadeToggle=函数（速度、缓和、回调）{
返回这个。设置动画（{opacity:'toggle'，height:'toggle'}，速度，缓和，回调）；
}; 
*{
保证金：0；
填充：0；
-webkit框大小：边框框；/*宽度和高度值包括内容、填充和边框，而不是边距*/
-moz框大小：边框框；
框大小：边框框；
-webkit点击突出显示颜色：rgba（0,0,0,0）；/*删除触摸设备上的突出显示*/
-webkit点击突出显示颜色：透明；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
html{
位置：相对位置；
最小高度：100%；/*粘性页脚*/
溢出y：滚动；
}
身体{
字体系列：“Helvetica Neue”，Helvetica，arial，无衬线；
字体大小：正常；
字号：18px；
线高：1.3；
字母间距：0.02em；
颜色：#000；
背景色：透明；
}
h1、h2、p、nav{
文本呈现：优化易读性！重要；
}
b、 强壮的{
字体大小：正常；
}
a:链接，a:已访问{
颜色：#000；
文字装饰：无；
}
h1，h2，导航a{
字体大小：正常；
文本转换：大写；
文字装饰：无；
保证金：0；
-webkit列span:all；/*断开列流*/
柱跨：全部；
}
h1，导航a{
字号：21px；
文本对齐：居中；
}
/************************************************
航行
************************************************/
标题{
位置：固定；
宽度：100%；
排名：0；
左：0；
保证金：0；
填充：0；
z指数：9999；
背景色：透明；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
.移动导航{
显示：无；/*隐藏移动导航*/
}
导航{
位置：相对位置；
填充：0 10px；
}
导航ul{
列表样式：无；
字体大小：0；/*删除默认间距*/
}
左导航{
浮动：左；
}
右导航{
浮动：对；
}
李海军{
显示：内联块；
}
导航a{
文本对齐：居中；
文字装饰：无；
背景色：透明；
利润率：0.10px；
线高：60px；
}
导航ul.右导航a:链路，
导航ul.右导航a:已访问{
颜色：#000；
文字装饰：无；
}
导航ul.右导航a:悬停，
导航ul。右导航a：聚焦，
导航ul.右-导航li.选定{
颜色：#000；
底部边框：2件纯黑；
}
/************************************************
纳维孔
************************************************/
.导航开关{
显示：块；
位置：绝对位置；
光标：指针；
填充：14px0；
左：10px；
z指数：3；
}
.导航图标{
位置：相对位置；
边缘顶部：7px；
边缘底部：7px；
}
.导航图标，
.导航图标：之前，
.导航图标：在{
显示：块；
宽度：24px；
高度：2倍；
背景色：黑色；
-webkit转换属性：背景色，-webkit转换；
-moz变换属性：背景色，-moz变换；
-o-transition-property：背景色，-o-transform；
过渡属性：背景色、变换；
-webkit转换持续时间：0.2s；
-moz转换持续时间：0.2s；
-o-过渡持续时间：0.2s；
过渡时间：0.2s；
}
.导航图标：之前，
.导航图标：在{
位置：绝对位置；
内容：“；
}
.导航图标：之前{
顶部：-7px；
}
.导航图标：在{
顶部：7px；
}
.nav-toggle.is-active.nav图标{
背景色：透明；
}
.nav-toggle.is-active.nav图标：之前{
-webkit变换：translateY（7px）旋转（45度）；
-莫兹变换：平移（7px）旋转（45度）；
-ms变换：translateY（7px）旋转（45度）；
-o变换：平移（7px）旋转（45度）；
变换：translateY（7px）旋转（45度）；
}
.nav-toggle.is-active.nav图标：之后{
-webkit变换：translateY（-7px）旋转（-45度）；
-moz变换：translateY（-7px）旋转（-45度）；
-ms变换：translateY（-7px）旋转（-45度）；
-o变换：平移（-7px）旋转（-45度）；
变换：translateY（-7px）旋转（-45度）；
}
/************************************************
反应敏捷的
************************************************/
@媒体屏幕和屏幕（最大宽度：1012px）{
.size-m{
最大宽度：700px；/*更大的文本宽度*/
}
}
@媒体屏幕和屏幕（最大宽度：667px）{
.压缩组.压缩项{
宽度：-webkit计算（50%-2px*2）；
宽度：计算（50%-2px*2）；
/*当“最大宽度”小于此值时，它将
始终相邻显示两个调整大小的缩略图*/
}
}
@介质和全部（最小宽度：668px）{
右导航{
显示：块！重要；
}
}
@介质和全部（最大宽度：667px）{
标题{
位置：固定；
背景色：红色；
}
.家{
背景色：白色；
左侧填充：50px；
右边填充：50px
$('.nav-toggle').click(function(event) {
        //  code
}