Question

所以，我本质上试图从this website中提取（以最粗略的方式）标题。他们所做的是当用户在某个位置滚动时添加一个额外的类＆gt;我认为这是直截了当的，但java总是有办法让我遇到问题。我想出了以下代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>
<style>
  body {
    height: 5000px;
  }
  #scroll {
    position: fixed;
    height: 50px;
    width: 100%;
  }
  .box {
    background-color: orange;
    color: white
  }
  .test {
    background-color: red;
    color: pink;
  }
</style>
<script>
  window.onscroll = function() {
    myFunction();
  };

  function myFunction() {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      document.getElementById("scroll").className = "test";
    } else {
      document.getElementById("scroll").className = "";
    }
  }
</script>

<body>

  <div class="box" id="scroll">THIS ISNT WORKING</div>

</body>

</html>

＆＃13;

当我向下滚动时，该类适用，但在向上滚动时不适用。有什么想法吗？

Answer 1

这是秘密，在这一行：

document.getElementById("scroll").className = "";

你没有将它设置回它的旧班box所以当滚动回顶部时它没有课程。改变它：

  function myFunction() {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      document.getElementById("scroll").className = "test";
    } else {
      document.getElementById("scroll").className = "box";
    }
  }

演示：

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>
<style>
  body {
    height: 5000px;
  }
  #scroll {
    position: fixed;
    height: 50px;
    width: 100%;
  }
  .box {
    background-color: orange;
    color: white
  }
  .test {
    background-color: red;
    color: pink;
  }
</style>
<script>
  window.onscroll = function() {
    myFunction();
  };

  function myFunction() {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      document.getElementById("scroll").className = "test";
    } else {
      document.getElementById("scroll").className = "box";
    }
  }
</script>

<body>

  <div class="box" id="scroll">THIS ISNT WORKING</div>

</body>

</html>

＆＃13;

Answer 2

您可以使用ALTER PROC [dbo].[Files_DeleteByInstructorFileId] @Id int, @FileId int = NULL as begin /* EXECUTE [dbo].[Files_DeleteByInstructorFileId] 162 */ Update [dbo].[Instructors] SET FileId = @FileId WHERE @Id = Id DELETE f FROM [dbo].[Files] f JOIN [dbo].[Instructors] ins ON ins.FileId = f.Id WHERE ins.Id = @Id END添加或删除类，而不是完全更改className。

这是一种情况。

假设您在这两种情况下都需要一些常见的css属性，我希望您不想在css类中添加这些属性。这将导致冗余。

让我们来看看这个css类

classList add/remove

}

如果您完全删除.box { background-color: orange; color: white; text-align: center; font-size: 20px; } .test { background-color: red; color: pink;，则会移除box＆amp; text-align属性，您可能希望保持不变。

以下是代码JSFIDDLE WITH EXAMPLE

HTML

font-size

JS

// Note there is an empty space beside box ,otherwise it will con-cat with 
//class add through class list and resultant will be boxtest

<div class="box " id="scroll">THIS ISNT WORKING</div>

CSS

window.onscroll = function() {
    myFunction();
  };
function myFunction() {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      document.getElementById("scroll").classList.add('test');
    } else {
      document.getElementById("scroll").classList.remove('test');
    }
  }

在滚动上添加课程不起作用？

2 个答案: