Виктор Тюрин Asked:2020-04-30 19:11:35 +0800 CST2020-04-30 19:11:35 +0800 CST 2020-04-30 19:11:35 +0800 CST 向上滚动时展开标题 772 我有一个带有标题的页面。如何使页面加载时标题不可见,但向上滚动时出现?那些。创造了“滚出”帽子的效果 javascript 2 个回答 Voted Inventor 2020-04-30T19:40:58+08:002020-04-30T19:40:58+08:00 记住当前的滚动位置并在页面上挂一个滚动事件。滚动时,将前一个滚动位置的值与当前位置的值进行比较,以确定滚动的方向,如果向上,则显示表头 Best Answer Sevastopol' 2020-04-30T19:57:35+08:002020-04-30T19:57:35+08:00 jQuery 示例: var $header = $(".header") var scroll = 0 var active = "active" $(window).scroll(function() { if ($(window).scrollTop() > scroll) { $header.addClass(active) } else { $header.removeClass(active) } }) body {margin: 0; padding: 0;} section {height: 100vh;} .one {background-color: chocolate;} .two {background-color: mistyrose;} .three {background-color: gold;} .header { background-color: red; height: 100px; position: fixed; top: -100px; left: 0; right: 0; transition: all 1s; } .active { top: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header">Header</div> <section class="one"></section> <section class="two"></section> <section class="three"></section> 作者更新 var $header = $(".header") var scroll = 0 var active = "active" $(window).scroll(function() { if ($(window).scrollTop() > scroll) { $header.addClass(active) } else { $header.removeClass(active) } }) body {margin: 0; padding: 0;} section {height: 100vh;} .one {background-color: chocolate;} .two {background-color: mistyrose;} .three {background-color: gold;} .header { background-color: red; height: 100px; margin-top: -100px; transition: all 1s; } .active { margin-top: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header">Header</div> <section class="one"></section> <section class="two"></section> <section class="three"></section>
记住当前的滚动位置并在页面上挂一个滚动事件。滚动时,将前一个滚动位置的值与当前位置的值进行比较,以确定滚动的方向,如果向上,则显示表头
jQuery 示例:
作者更新