Javascript 如何在网页上显示导航栏？

我正在制作一个导航条的消失，它出现在网页的标题上。要求是当用户向下滚动时，它应该消失。因此，它是使用以下javascript实现的，并且工作正常

//标题滚动到200
$（函数（）{
$（'#header'）.removeClass（'header-small'）；
$（文档）.on（'滚动'，$（窗口），函数（）{
var scroll=$（窗口）.scrollTop（）；
$（窗口）.s
/*带报价滑块65和不带报价滑块*/
var scrollToHeight=35；
var sectionHeight=“135px”；
如果（滚动>=滚动高度）{
$（'.navigation all'）.slideUp（100）；
$（'.section'）.css（'margin-top'，sectionHeight）；
$（'#header'）.addClass（'header-small'）；
$（“.logo text”）.slideUp（100）；
$（'.floating cart'）.removeClass（'myCartPopUpShow'）；
}否则{
$（'#header'）.removeClass（'header-small'）；
$（'.section'）.css（'margin-top'，'100'）；
$（'.navigation all'）。向下滑动（300）；
$（'.logo text'）。向下滑动（300）；
$（'.floating cart'）.addClass（'myCartPopUpShow'）；
}
});
});您可以将标题固定为不使用css滚动：

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
}

更多示例：


谢谢更新这里是获得这种效果的最简单方法

演示：

JQUERY
CSS
HTML
固定标题
显示/隐藏OnScroll标题
呜呜呜呜。。
例如，你可以看到Homeshop18.com，红色导航栏的行为。
var lastScrollTop = 0;
$(document).on('scroll', function () {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('#showHide_hd').slideUp(500);
    } else {
        $('#showHide_hd').slideDown(500);
    }
    lastScrollTop = st;
});

#fixed_hd {
    position:fixed;
    top:0;
    left:0;
    width:98%;
    height:20px;
    background:#dfdfdf;
    padding:20px 1%;
}
#showHide_hd {
    position:fixed;
    top:60px;
    left:0;
    width:100%;
    background:green;
    padding:10px 0;
}
#content{
    float:left;
    margin:110px 0 0 0;
}

<div id="fixed_hd">Fixed Header</div>
<div id="showHide_hd">Show/Hide OnScroll Header</div>
<div id="content">
    bla bla bla..
</div>