Question

我正在尝试制作一个标题，该标题在使用javascript向上滚动时是粘性的，而在向下滚动时则不显示，为此，我添加了一个类.header-up并通过CSS提供了transform: translateY(-100%);。它工作正常，但是当我打开标题中的全页菜单并尝试关闭[顶部标题没有问题，但是我们从顶部滚动一点后就可以看到问题了]类“ header-up”仍然存在。因此标题将在视口区域之后向上移动。我尝试使用此代码.header-up删除s.removeClass("header-up")类，以使标头粘贴在同一位置。 jsFiddle

这是我用于滚动和切换整个页面菜单的javascript。

$( document ).ready(function() {
    var scroll_pos = 0;
        var scroll_time;

    $(window).scroll(function() {
      clearTimeout(scroll_time);
      var current_scroll = $(window).scrollTop();

      if (current_scroll >= $("#header").outerHeight()) {
        if (current_scroll <= scroll_pos) {
          $("#header").removeClass("header-up");
        } else {
          $("#header").addClass("header-up");
        }
      }

      scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
      }, 100);
    });
});



    $("#navbar-toggle").on("click", function(t) {
      var e = $(this).data("scroll-y"),
        i = $(window).scrollTop(),
        n = $("#navbar-toggle"),
        o = $("#overlay-nav"),
        s = $("#header"),
        r = $("body");
      o.hasClass("toggle")
        ? (r.css("top", "0px").removeClass("noscroll"),
          window.scrollTo(0, e),
          o.removeClass("toggle"),
          n.removeClass("open"),
          s.removeClass("overlay-nav-toggled"),
          s.removeClass("pos-fixed"),
          s.removeClass("header-up"),
          setTimeout(function() {
            s.removeClass("suppress-scroll");
          }, 700))
        : ($(this).data("scroll-y", i),
          o.addClass("toggle"),
          n.addClass("open"),
          s.addClass("overlay-nav-toggled suppress-scroll"),
          r.css("top", -i + "px").addClass("noscroll"));
    });

Answer 1

更新此

if (current_scroll <= scroll_pos) {

带有以下内容

if (current_scroll <= scroll_pos || $('#header').hasClass('suppress-scroll')) {

Answer 2

我不完全理解您的问题，但这是您要寻找的吗？

var lastScrollTop = 0;
var headerElement = $('header');

$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // scroll down
     headerElement.addClass('header-hidden');
   } else {
      // scroll up
     headerElement.removeClass('header-hidden');
   }
   
   lastScrollTop = st;
});

body {
  background: #f5f5f5;
  position: relative;
}

header {
  background: white;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px;
  transition: 500ms margin-top ease;
}
header.header-hidden {
  margin-top: -100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <p>header</p>
</header>

<p>accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?</p>

修改根据此问题的所有者的反馈：单击按钮时标题消失的原因是您的＃overlay-nav具有位置：固定和顶部：0 标头仍然存在，但是菜单元素位于其顶部。

更改z-index值或更改top: 0值下面的代码将解决您的问题，但请不要忘记检查响应，因为您现在正在设置静态值

#overlay-nav {
   top: 100px;
}

滚动功能处于活动状态时如何删除类

2 个答案: