Question

所以我在我的代码中包含wow.js以显示滚动上的元素，现在当我滚动到我的页面this的最后一部分时，到目前为止，当我离开时，我试图让事情消失来自他们，但在wow.js中找不到这样的功能，所以我可能在这里有人可以帮助我。我也有用于导航栏的sticky.js跟随用户访问网站。

这是评论室的代码，减去图片和星星，因为图片在我的高清上，而且星星很棒。

/* Navbar */

.navbar-default .navbar-brand {
	color: #242424;
	font-style: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 25px;
	padding-left: 50px;
	padding-top: 14px;
}

.navbar-default .navbar-brand:hover {
	color: #141414;
	font-weight: 700;
	font-size: 25px;
	padding-left: 50px;
	padding-top: 14px;
}

.navbar-default .navbar-nav>li>a {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
}

.navbar {
	margin-bottom: 0;
	border-radius: 0;
		z-index: 1;
}

/* Review houses */

.rev-houses {
  background-color: #F0F0F0;
  margin-bottom: 15px;
  padding-bottom: 25px;
  padding-right: 25px;
  padding-left: 25px;
}
#first-house {
  left: 160px;
}
.house-one-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #191919;
  padding-top: 15px;
}
.house-one-text-name {
  font-family: 'Lato', sans-serif;
  color: #191919;
  font-size: 14px;
  margin-top: -10px;
}

<head>
  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css?family=Lato:400i|Open+Sans:400|Roboto+Condensed:700|Roboto:700" rel="stylesheet">

  <!-- Font awesome -->
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

  <!-- Scroll CSS -->
  <link rel="stylesheet" href="css/animate.css">

  <!-- Scroll script -->
  <script src="js/wow.min.js"></script>
  <script>
    new WOW().init();
  </script>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="100">

  <nav class="navbar navbar-default navbar-fixed-top" data-toggle="collapse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><i class="fa fa-shopping-cart"></i> Online Shop</a>
      </div>
      <div class="collapse navbar-collapse" id="main-nav-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about-link" class="navbar-about">About Us</a>
          </li>
          <li><a href="#review-link" class="navbar-contact">Reviews</a>
          </li>
          <li><a href="#shops-link" class="navbar-contact">Shops</a>
          </li>
          <li><a href="/" class="navbar-contact">Order Now</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>

    <div class="wow fadeInLeft" data-wow-offset="100">
      <div class="review-houses">
        <div id="first-house" class="col-md-2 col-sm-2 rev-houses">
          <div class="text-center">
          </div>
          <p class="text-center house-one-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <br>
          <div class="text-left">
            <p class="house-one-text-name">- John Doe</p>
            <br>
          </div>
          <div class="text-center">
            <div class="review-stars">
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
              <i class="fa fa-star"></i>
            </div>
          </div>
        </div>
      </div>
</body>

在滚动js上显示有问题

0 个答案: