时间戳

首页 > 解决方案 > 滚动后如何从导航栏中删除一个元素？

javascript - 滚动后如何从导航栏中删除一个元素？

问题描述

我的导航栏中有一个徽标。但是向下滚动页面后，导航栏仍然固定在顶部。但是我想在向下滚动后删除徽标，因为它占用了太多空间。当页面向上滚动到顶部时，我希望它只是导航栏的一部分。如何使用 Javascript 删除它？

var prev = 0;
var $window = $(window);
var nav = $('#logo');

$window.on('scroll', function() {
  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});
*{
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-header page-scroll">
  <img id="logo" src="">
  <div class="collapse navbar-collapse navbar-main-collapse">
  </div>
</div>

（*我已经插入，*{}以便清楚地理解布局）。

标签： javascripthtmlcss

解决方案

使用下面的 jquery 代码隐藏滚动上的图像。

window.onscroll = function (e)
{
    $('#logo').hide();
}

推荐阅读