主页 / 问题 / 1213962
Accepted
realHikkan
Asked:2021-12-04 18:37:07 +0000 UTC2021-12-04 18:37:07 +0000 UTC

滚动页面时不出现块阴影

  • 772

为什么滚动条上不出现阴影？

$(window).scroll(function() {
  $('header').toggleClass('scroll', $(this).scrollTop() > 63);
});
body {
  height: 1200px;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 63px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
}

.scroll {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<body>
  <header>
    <div class="header">
    </div>
  </header>
</body>

javascript

1 个回答

  1. Best Answer

    因为您在 script 中引用了标签header，并且样式是为该类编写的.header-这行不通：

    $(window).scroll(function() {
  $('.header').toggleClass('scroll', $(this).scrollTop() > 63);
});
    body {
  height: 1200px;
}

.header {
  position: fixed;
  display: flex;
  width: 100%;
  height: 63px;
  left: 0px;
  top: 0px;
  background: #FFFFFF;
}

.scroll {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <header>
    <div class="header">
    </div>
  </header>
</body>

    • 2

相关问题