Javascript 基于滚动删除添加类隐藏导航

我找到了一个导航布局，我想使用，但我似乎遇到了两个问题

问题#1当上下滚动时，css中的转换似乎并不平滑

问题#2如果滚动位置不是零，我不希望主导航缩小，我希望上下滚动时顶部导航显示或隐藏。。这很难说，所以我正努力做到以下几点

现在，当你向下滚动时，它会隐藏顶部导航，但如果你只向每个方向滚动一点，它就会显示或隐藏，这就是我试图做的。。但我不希望第二个导航缩小，除非顶部为0

$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>0）{
$（'.netnav'）.addClass（'hide-nav'）；
$（'.netnav'）.removeClass（'show-nav'）；
$（'.mainnav'）.addClass（'scrolled'）；
} 
否则{
$（'.netnav'）.addClass（'show-nav'）；
$（'.netnav'）.removeClass（'hide-nav'）；
$（'.mainnav'）.removeClass（'scrolled'）；
}
});
正文{
边际：0px；
}
hwrap先生{
显示：块；
位置：固定；
宽度：100%；
}
.netnav{
位置：固定；
高度：40px；
宽度：100%；
保证金：0；
填充：0；
背景颜色：蓝色；
z指数：1；
}
.netnav.show-nav{
排名：0；
过渡时间：.4s；
}
.netnav.hide-nav{
变换：translate3d（0，-40px，0）；
过渡时间：.4s；
}
mainnav先生{
位置：固定；
高度：68px；
z指数：3；
背景：蓝色；
}
mainnav先生{
边界半径：4px；
左：自动；
保证金：0自动；
顶部：50px；
位置：相对位置；
转换：translateY（15px）；
转换：transform.3s，width.3s；
宽度：计算（100%-60px）；
}
.mainnav.scrolled{
排名：0；
高度：60px；
边界半径：0；
变换：translateY（0）；
宽度：100%；
转换：transform.3s，width.3s；
}

净导航
主导航
关于
关于
我稍微更改了您的转换，并将转换添加到您切换的类中

body {
    margin: 0px;
}

.hwrap {
    display: block;
    position: fixed;
    width: 100%;
}

.netnav {
    position: fixed;
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: blue;
    z-index: 1;
    transition: .3s all;
}

.netnav.show-nav {
    top: 0;
    transition: .3s all;
}

.netnav.hide-nav {
    transform: translate3d(0, -40px, 0);
    transition: .3s all;
}

.mainnav {
    position: fixed;
    height: 68px;
    z-index: 3;
    background: blue;
}

.mainnav {
    border-radius: 4px;
    left: auto;
    margin: 0 auto;
    top: 50px;
    position: relative;

    transform: translateY(15px);
    transition: .3s all;
    width: calc(100% - 60px);
}

.mainnav.scrolled {
    top: 0;
    height: 60px;
    border-radius: 0;
    transform: translateY(0);
    width: 100%;
    transition: .3s all;
}

我按照您提供的链接编辑了JavaScript和CSS

修复了CSS中使用JavaScript向上或向下滚动时，过渡看起来不平滑的过渡

您可以访问我根据您的代码片段编辑的这个，并使用它


$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>15）{
$（'.netnav'）.addClass（'hide-nav'）；
$（'.netnav'）.removeClass（'show-nav'）；
$（'.mainnav'）.addClass（'RemoveTop'）；
}
否则{
$（'.netnav'）.addClass（'show-nav'）；
$（'.netnav'）.removeClass（'hide-nav'）；
$（'.mainnav'）.removeClass（'RemoveTop'）；
$（'.mainnav'）.removeClass（'scrolled'）；
}
});
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>50）{
$（'.mainnav'）.addClass（'scrolled'）；
}
否则{
$（'.netnav'）.removeClass（'scrolled'）；
}
});
正文{
边际：0px；
}
hwrap先生{
显示：块；
位置：固定；
宽度：100%；
}
.netnav{
位置：固定；
高度：40px；
宽度：100%；
保证金：0；
填充：0；
背景颜色：蓝色；
过渡：全部3秒；
z指数：1；
}
.netnav.show-nav{
排名：0；
过渡时间：.4s；
}
.netnav.hide-nav{
变换：translate3d（0，-40px，0）；
过渡时间：.4s；
}
mainnav先生{
位置：固定；
高度：68px；
z指数：3；
背景：蓝色；
}
mainnav先生{
边界半径：4px；
左：自动；
保证金：0自动；
顶部：50px；
位置：相对位置；
转换：translateY（15px）；
过渡：all.3s，width.3s；
宽度：计算（100%-60px）；
}
.mainnav.RemoveTop{
顶部：0px；
}
.mainnav.scrolled{
高度：60px；
边界半径：0；
变换：translateY（0）；
宽度：100%；
}

净导航
主导航
关于
关于
Demo

解释
添加了
过渡：所有的易入易出。4s
用于所有属性的平滑过渡
如果
scrollTop>0
将
边距：0px
和
边框半径：0px
添加到底部（主）导航，则使
边距
和
边框半径
与初始状态相同
如果
scrollDir==“down”
将
translateY（-50px）
添加到
标题
，否则删除
translateY
移动整个收割台将移动两个导航，这比单独移动导航要好
这改进了过渡，但动画仍然不可用correct@v-索里亚诺有没有办法在没有像网站上那样的0px时添加滚动条？我终于想出了你想要实现的目标@Codi您可以通过演示代码将其添加到您的代码中。如果您想要详细的分析，您可以访问此以供参考。希望它现在能解决您的问题。@V Soriano我看到JFIDLE上面您展示的部分对一部分有效，但对另一部分无效。@Codi欢迎！：）