Question

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

＆＃13;

// Header scroll to 200
$(function () {
    $('#header').removeClass('header-small');
    $(document).on('scroll', $(window), function () {
        var scroll = $(window).scrollTop();
        $(window).s
        /* With offer slider 65 and with out offer slider */
        var scrollToHeight = 35;
        var sectionHeight = "135px";
        if (scroll >= scrollToHeight) {
            $('.navigation-all').slideUp(100);
            $('.section').css('margin-top', sectionHeight);
            $('#header').addClass('header-small');
            $('.logo-text').slideUp(100);
            $('.floating-cart').removeClass('myCartPopUpShow');
        } else {
            $('#header').removeClass('header-small');
            $('.section').css('margin-top', '100');
            $('.navigation-all').slideDown(300);
            $('.logo-text').slideDown(300);
            $('.floating-cart').addClass('myCartPopUpShow');
        }
    });
});

＆＃13;

向下滚动35px后消失。当用户向上滚动到顶部时再次出现。现在我想让它变得可见，因为用户甚至可以稍微向上滚动它。

请告知我可以在现有脚本中进行哪些更改。提前致谢。

Answer 1

您可以修改标题以不使用css滚动：

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

更多示例：

https://css-tricks.com/scroll-fix-content/

由于

Answer 2

更新！以下是获得此效果的最简单方法，

DEMO：http://jsfiddle.net/yeyene/fnyxpw94/1/

JQUERY

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;
});

CSS

#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;
}

HTML

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

如何在网页上显示 - 消失导航栏？

2 个答案:

JQUERY

CSS

HTML