向下滚动时隐藏导航栏并显示图像以将其打开

Question

我正在尝试制作一个导航栏，该导航栏将在向下滚动时隐藏，并替换为单击时应返回导航栏的按钮。

您可以在这里满足我的需要：example。

这是我正在尝试使用的代码示例，但是，当导航栏隐藏时，我需要在浏览器顶部中心显示链接或图片，这是可点击的，当我点击它时再次显示导航栏。并且在向上滚动时停止显示。

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

body {
    padding-top: 40px;
}

header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -40px;
}

main {
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}

footer { background: #ddd;}
* { color: transparent}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="nav-down">
    This is your menu.
</header>
<main>
    This is your body.
</main>
<footer>
    This is your footer.
</footer>

Answer 1

我想做类似的事情。在向上滚动而不是单击按钮时重新出现。无论如何，这个 javascript（不是我的）应该可以解决问题：

https://jsfiddle.net/mariusc23/s6mLJ/31/

这是我在 React 中得到的结果：

ListLayout = React.createClass({

    getInitialState: function() {

        return {
            didScroll: false,
            lastScrollTop: 0,
            delta: 5,
            navbarHeight: 0
        }
    },

    componentWillMount() {
        // because our window is our scrollable container we need to add an event listener
        window.addEventListener("scroll", this.handleScroll);
    },

    componentWillUnmount() {
        // because react isnt managing the event we need to remove it when the component unmounts
        window.removeEventListener("scroll", this.handleScroll);
    },

    componentDidMount() {
        this.setState({
            navbarHeight : $('nav').outerHeight()
        });
    },

    handleScroll (event) {
        this.setState({
            didScroll : true
        });
    },

    render() {

        setInterval(function() {
            if (this.state.didScroll) {
                this.hasScrolled();
                this.setState({
                    didScroll : false
                });
            }
        }.bind(this), 250);

        return (
          <div className="container-fluid">
              <NavBar />
              {this.props.container}
          </div>
        )
    },

    hasScrolled() {

        var st = $(window).scrollTop();

        // Make sure they scroll more than delta
        if( Math.abs ( this.state.lastScrollTop - st ) <= this.state.delta)
            return;

        // If they scrolled down and are past the navbar, add class .nav-up.
        // This is necessary so you never see what is "behind" the navbar.
        if (st > this.state.lastScrollTop && st > this.state.navbarHeight){
            // Scroll Down
            $('.search-bar-css').addClass('navbar-hidex2');
            $('nav').addClass('navbar-hide');
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                $('.search-bar-css').removeClass('navbar-hidex2').addClass('navbar-showx2');
                $('nav').removeClass('navbar-hide').addClass('navbar-show');
            }
        }

        this.setState({
            lastScrollTop : st
        });

    }

});