主页 / 问题 / 1118182
Accepted
Виктор Тюрин
Asked:2020-04-30 19:11:35 +0000 UTC2020-04-30 19:11:35 +0000 UTC

向上滚动时展开标题

  • 772

我有一个带有标题的页面。如何使页面加载时标题不可见，但向上滚动时出现？那些。创造了“滚出”帽子的效果

javascript

2 个回答

  1. 记住当前的滚动位置并在页面上挂一个滚动事件。滚动时，将前一个滚动位置的值与当前位置的值进行比较，以确定滚动的方向，如果向上，则显示表头

    • 1
  2. Best Answer

    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>

    • 1

相关问题