Question

我试图在其父div到达页面顶部时隐藏“h1”元素，然后在使用JQuery和CSS从顶部向下移动时再次显示它。我曾尝试在JQuery中使用滚动侦听器来切换类，但这会导致“h1”在正在切换的类之间快速切换。有没有办法可以在div到达页面顶部时隐藏它，然后在它向下移动时再显示它？

$(function() {
  $(document).scroll(function() {
    var distance_from_top = $("#backgroundtitle h1").offset().top;
    if (($(window)).scrollTop() > distance_from_top) {
      $("#backgroundtitle h1").toggleClass("hidetitle");
    }
    if (($(window)).scrollTop() < distance_from_top) {
      $("#backgroundtitle h1").toggleClass("hidetitle");
    }
  });
});

@charset "utf-8";
 html {
  height: 100%;
  margin: 0;
  font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
#header {
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  line-height: 50px;
  position: fixed;
  top: 0;
}
#header {
  margin: 0 auto;
  display: block;
}
#header ul {
  list-style-type: none;
  margin: 0;
  text-align: center;
  padding: 0;
}
#header ul li {
  display: inline;
  text-align: center;
}
#header a {
  color: #FFFFFF;
  padding: 0 5%;
  margin: 0;
  text-align: center;
}
#homeimage {
  background: url(Images/Home_Image.jpg) no-repeat center center;
  background-size: cover;
  height: 100%;
  position: relative;
  top: 0;
  z-index: -100;
  width: 100%;
  display: block;
}
#background {
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
  display: table;
  background: rgba(0, 0, 0, 0.2)
}
#background h1 {
  display: table-cell;
  vertical-align: middle;
  font-size: 100px;
  color: #FFFFFF;
  font-weight: 100;
}
#backgroundtitle {
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
}
#backgroundtitle h1 {
  font-size: 100px;
  color: #FFFFFF;
  font-weight: 100;
  text-align: center;
  display: inline;
  padding: 0;
  margin: 0;
}
#container1 {
  height: auto;
  background-color: #00A3FF;
  overflow: hidden;
}
#container1 h1 {
  padding: 0;
  padding-top: 5%;
  margin: 0;
  color: #FFFFFF;
  text-align: center;
}
#container1text {
  width: 50%;
  padding: 2.5%;
  float: left;
}
#container1text p {
  font-size: large;
}

<body>
  <div id="header">
    <ul>
      <li><a href="#homeimage">Home</a>
      </li>
      <li><a href="#container1">Introduction</a>
      </li>
    </ul>
  </div>
  <div id="homeimage">
    <div id="background">
      <div id="backgroundtitle">
        <h1>Title</h1>
      </div>
    </div>
  </div>
  <div id="container1">
    <h1>Introduction</h1>
    <div id="container1text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cumque, id, quasi iste illum dolorum libero vero voluptate labore ullam voluptatum aliquam tempore dolor molestiae debitis hic ipsam vel quidem.</p>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dignissimos magni nulla cupiditate nisi veritatis hic ullam saepe dolor numquam recusandae assumenda aspernatur perspiciatis non similique ipsam architecto sapiente excepturi!</p>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, ducimus, atque, delectus, fugiat adipisci animi deserunt culpa doloremque ea impedit natus dolores amet veniam vitae eaque eligendi fugit dolorum hic!</p>
    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

发生这种情况的原因是因为您在切换之前未检查h1元素是否具有隐藏类。因此，滚动动作会触发类切换。以下代码检查元素是否在顶部，以及在切换之前是否具有隐藏类。

$(function() {
    $(document).scroll(function() {
        var h1selector = $("#backgroundtitle h1");
        var distance_from_top = h1selector.offset().top;

        if(($(window)).scrollTop() > distance_from_top && h1selector.hasClass("hidetitle")) {
            h1selector.toggleClass("hidetitle");
        }
        else if($(window)).scrollTop() < distance_from_top && !h1selector.hasClass("hidetitle")){
            h1selector.toggleClass("hidetitle");
        }
    });
});

Answer 2

我会使用addClass（）和removeClass（）这样的情况。
1.为您的标题分配一个ID，即：id =“title” 2.在您的样式集中#title.hideTitle {display：none;} //这将覆盖您拥有的其他样式规则。
3.然后在你的javascript：

<script>
$(document).ready(function(){
  $(document).scroll(function() {
      if($(window).scrollTop() > 301) {
          $("#backgroundtitle h1").addClass("hideTitle");
      }else{
        $("#backgroundtitle h1").removeClass("hideTitle");
      }
  });
});
</script>

让我知道你的想法; - ）

将div滚动到页面顶部时隐藏div

2 个答案: