javascript - div 在加载时消失并出现在滚动条上

Question

我已经为这个显示在滚动条上的简单应用程序编写了 css、js 和 html，但它仍然无法在 html 中运行？也许这就是我在我的 html 中连接它的方式，但这似乎很好我搜索了许多网站以确认它是正确的......我不知道我哪里出错了。

CSS:

.aboutfilmandcrew {
  width: 100%;
  float: left;
  background-color: green;
}
#filminfo{
    padding:1em;
    border:.1em solid rgb(230, 230, 230);
    margin: 2em;
    width: 40%;
    float: left;    
}
#crew{
    padding:1em;
    border:.1em solid rgb(230, 230, 230);
    margin: 2em;
    width: 40%;
    float: right;
}

HTML:

<div>
    <div id="filminfo"> Neuromancer, a novel written by William Gibson in 1984, takes place in the near future in a cyberpunk setting. Cyberpunk is a genre that focuses on future societies where technology has advanced, but crime and corruption have as well. Common features include globe-spanning mega-corporations, cybernetically enhanced mercenaries, and the importance of technology as a tool for crime. The story follows the experiences of Case, an out-of-work hacker who is contacted by a mysterious new employer called Armitage. Along with Molly, a mercenary cyborg, and a thief/illusionist named Peter Riviera, Case participates in a series of data thefts for their employer. Based on the novel, and helmed by master director Ridley Scott, NEUROMANCER features a star studded cast that includes Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch.
        <br/>
        <h4> GENRES </h4> <p>Sci fi/Adventure </p>
    </div>
    <!---aboutfilm-->
    <div id="crew">
        <p>Director Ridley Scott </p>
        <p> Screenplay by Drew Goddard </p>
        <p> Based on the Novel By William Gibson </p>
        <p> Producers Simon Kinberg, Ridley Scott, Michael Schaefer, Aditya Sood, Mark Huffam </p>
        <p> Actors Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch </p>
    </div>
</div>
<!---crew-->
<!---aboutfilmandcrew-->

JS:

  $(document).scroll(function() {
  var y = $(this).scrollTop();

  if (y > 200) {
    $('.aboutfilmandcrew').fadeIn();
  } else {
  console.log("<");
    $('.aboutfilmandcrew').fadeOut();
  }
});`

Answer 1

根据我的说法，您的代码可以正常工作。

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 200) {
        $('.aboutfilmandcrew').fadeIn();
    } else {
        $('.aboutfilmandcrew').fadeOut();
    }
});

.aboutfilmandcrew {
    width: 100%;
    float: left;
    background-color: green;
}
#filminfo {
    padding: 1em;
    border: .1em solid rgb(230, 230, 230);
    margin: 2em;
    width: 40%;
    float: left;    
}
#crew {
    padding: 1em;
    border: .1em solid rgb(230, 230, 230);
    margin: 2em;
    width: 40%;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aboutfilmandcrew">
  <p id="filminfo"> 
    Neuromancer, a novel written by William Gibson in 1984, takes place in the near future in a cyberpunk setting. Cyberpunk is a genre that focuses on future societies where technology has advanced, but crime and corruption have as well. Common features include globe-spanning mega-corporations, cybernetically enhanced mercenaries, and the importance of technology as a tool for crime.
    The story follows the experiences of Case, an out-of-work hacker who is contacted by a mysterious new employer called Armitage. Along with Molly, a mercenary cyborg, and a thief/illusionist named Peter Riviera, Case participates in a series of data thefts for their employer.  Based on the novel, and helmed by master director Ridley Scott, NEUROMANCER features a star studded cast that includes Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch.
    <h4>GENRES</h4>
    Sci fi/Adventure
  </p>
</div>

<div id="crew">
    <p>Director Ridley Scott </p>
    <p> Screenplay by Drew Goddard </p>
    <p> Based on the Novel By William Gibson </p>
    <p> Producers Simon Kinberg, Ridley Scott, Michael Schaefer, Aditya Sood, Mark Huffam </p>
    <p> Actors Ryan Gosling, Lucy Liu, Hayden Christensen and Benedict Cumberbatch </p>
</div>