本文演示了jQuery滚动时顶部导航显示的隐藏效果代码，供大家参考：

运行效果的截图如下：


具体代码如下：

介绍核心文件








构建HTML，margint，它是建立在以div出现滚动条，没有实际作用。




这是顶部导航条
滚动查看效果滚动



写CSS




。顶部标题{背景：# e74c3c；颜色：白色；字体大小：24px；填充：5px；文本对齐：中心；位置：固定；左：0；最高：0；宽度：100%；过渡：，}；}
。隐{顶：- 90px；}
顶：0。显示{；Z指数：9999；}



过渡：top.5s是最高头衔的定义；它是指在the.5s动画时间的前方向值的变化。如果加上隐藏的类，最高头衔将缓冲0动画上- 90px在0.5秒之内。

写js




$（函数（）{（））
无功winheight = $（document）的ScrollTop（）；

$（窗口）。滚动（函数（）{）
无功scrolly = $（document）（。scrollTop）； / /得到垂直滚动的距离，即滚动数

如果（scrolly > 550）{ / /如果滚动距离大于550px隐藏或删除隐藏类
$（'。最高头衔的）。AddClass（'hiddened）；
}
{其他
$（'。最高头衔的）。RemoveClass（'hiddened）；
}

如果（scrolly > winheight）{ / /如果没有滚动到顶部，删除或添加显示类型
$（'。最高头衔的）。RemoveClass（'showed）；
}
{其他
$（'。最高头衔的）。AddClass（'showed）；
}

}）；
}）；


以上是一个基于jQuery的总体思路，实现网页滚动时的顶部导航显示和隐藏。我希望你能沿着这种方式完成导航和隐藏效果。谢谢你的阅读。