向上滚动时从元素中删除 css

Question

我正在制作一个框架，当第二张幻灯片变为活动状态时，我需要在其中显示导航（上一个/下一个）。它在向下滚动时正确发生，但现在的情况是，当从第二个元素（#box_two）中删除活动时，从向下滚动需要隐藏导航（上一个/下一个）。请点击以下链接：

http://52.88.196.216/test/index.html

Answer 1

首先你必须检测用户何时向上滚动，你可以这样做：

// contains the last value of the 
var lastScrollTop = 0;
// detect onscroll event
$(window).scroll(function(event) {
  // store the current scroll value in a variable
  var scroll = $(this).scrollTop();
  // check if the current scroll is less than the last scroll
  // if so, then we're scrolling up, otherwise we're scrolling down
  if(scroll < lastScrollTop) {
    // the user is scrolling up do something awesome here...
  }
  // update the last scroll
  lastScrollTop = scroll;
});

然后你必须删除元素的 CSS，你可以通过删除一个类来做到这一点，像这样：

// get your element and remove the CSS class from it
$("div").removeClass("target-classname");

您也可以直接在 jQuery 中更改元素的 CSS，如下所示：

// changing multiple values at once
$("div").css({
  "property": "value"
});
// changing only one value
$("div").css("property", "value");

把它们放在一起，它看起来像这样：

// contains the last value of the 
var lastScrollTop = 0;
// detect onscroll event
$(window).scroll(function(event) {
  // store the current scroll value in a variable
  var scroll = $(this).scrollTop();
  // check if the current scroll is less than the last scroll
  // if so, then we're scrolling up, otherwise we're scrolling down
  if(scroll < lastScrollTop) {
    // change the css of your div
    $("div").css("property", "value");
  }
  // update the last scroll
  lastScrollTop = scroll;
});

没有 cmets：

var lastScrollTop = 0;
$(window).scroll(function(event) {
  var scroll = $(this).scrollTop();
  if(scroll < lastScrollTop) {
    $("div").css("property", "value");
  }
  lastScrollTop = scroll;
});

当然你可以像这样把scroll up / down函数变成一个jQuery插件：

$.fn.scrollUp = function(callback) {
  // get the current element
  var self = $(this);
  // contains the last value of the 
  var lastScrollTop = 0;
  // detect onscroll event
  self.scroll(function(event) {
    // store the current scroll value in a variable
    var scroll = self.scrollTop();
    // check if the current scroll is less than the last scroll
    // if so, then we're scrolling up, otherwise we're scrolling down
    if (scroll < lastScrollTop) {
      // call the callback
      callback.apply(self, [scroll]);
    }
    // update the last scroll
    lastScrollTop = scroll;
  });
};

$.fn.scrollDown = function(callback) {
  // get the current element
  var self = $(this);
  // contains the last value of the 
  var lastScrollTop = 0;
  // detect onscroll event
  self.scroll(function(event) {
    // store the current scroll value in a variable
    var scroll = self.scrollTop();
    // check if the current scroll is less than the last scroll
    // if so, then we're scrolling up, otherwise we're scrolling down
    if (scroll > lastScrollTop) {
      // call the callback
      callback.apply(self, [scroll]);
    }
    // update the last scroll
    lastScrollTop = scroll;
  });
};

然后像这样使用它们：

$(window).scrollUp(function(scroll) {
  // lets log the scroll amount here for example
  console.log(scroll);
  // note you can still use "this" and "$(this)" in here and they will correctly reference your element above (in this case "$(window)")
  $(this).find("body").html("You are scrolling up<br />" + "Scroll: " + scroll + "<br />");
});

$(window).scrollDown(function(scroll) {
  // lets log the scroll amount here for example
  console.log(scroll);
  // note you can still use "this" and "$(this)" in here and they will correctly reference your element above (in this case "$(window)")
  $(this).find("body").html("You are scrolling up<br />" + "Scroll: " + scroll + "<br />");
});

使用 jQuery 插件你会得到这样的结果：

// use the plug-in to detect the "scroll up" event
$(window).scrollUp(function(scroll) {
  // change the css of your element
  $("div").css("property", "value");
});

没有 cmets：

$(window).scrollUp(function(scroll) {
  $("div").css("property", "value");
});

祝你好运，万事如意。

Answer 2

此代码将从Selector 元素中删除类className

Selector.removeClass("className")