Question

这是我的问题：

我想轻轻地隐藏一个div，不确定动画是否合适，但这是我通过鼠标滚动达到某个div时的主要作用范围。

那是我的代码，我将在之后解释主要问题：

var element_position = $('.blog-masthead').offset().top;

$(window).on('scroll', function() {
  var y_scroll_pos = window.pageYOffset;
  var scroll_pos_test = element_position + 100;
  console.log(y_scroll_pos + ' ' + scroll_pos_test);
  if (y_scroll_pos > scroll_pos_test) {
    $('.splash-image').addClass('height0');
    $('.blog-masthead').addClass('fixed');
  }
});

.splash-image.height0 {
  display: none;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.splash-image {
  transition: height 1s ease-out;
  font-size: 1.9rem;
  text-transform: uppercase;
  font-weight: 100;
  background-attachment: fixed;
  background-image: url(../images/AAPS_desktop_homepage_3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="splash-image">
  Header
</div>
<div class="blog-masthead">
  Main menu
</div>

基本上，我有一个div，占用文档高度的100vh。

然后，用户将滚动直到其中的主菜单。此时，效果才会被触发，因此我的脚本将添加两个类：一个将菜单更改为固定位置的菜单，另一个隐藏元素（display：none）。

它有效，但是唯一的问题是，当您到达element_position时，窗口将跳至文档的另一部分，并且主菜单之后的内容将被奇怪地剪切。有什么解决方案可以避免此问题，只保留没有脚本的位置？

谢谢

滚动到某个其他div后，轻轻隐藏div

0 个答案: