Question

我有多个动态内容部分。每个部分都有标题标记。

First section h2 class name is "bounceInRight"
First section h2 class name is "bounceInLeft"
third section h2 class name is "bounceInRight"
Fourth section h2 class name is "bounceInLeft" and goes on.

如果我到达这个班级，我需要将一些班级添加到另一个div名称“blink”。

为此，我使用了以下代码：

var eyemoveright = $(".bounceInRight h2").offset().top;
var eyemoveleft = $(".bounceInLeft h2").offset().top;
$(window).scroll(function() {

    if($(window).scrollTop() > eyemoveright) { 

        $('.blink').addClass( "move-right");
        $('.blink1').addClass( "move-right");
    }   

    if($(window).scrollTop() > eyemoveleft) { 

        $('.blink').addClass( "move-left");
        $('.blink1').addClass( "move-left");
    }                               
});

请看小提琴。

http://jsfiddle.net/zvkjfk6r/

前两部分工作正常。这些类正确添加。如果到达第三个内容块，则添加类不起作用。因为我使用了两个if条件。如何再次调用第一个If条件，如果第三个块内容到达？

Answer 1

如果在第一个条件内写入第二条if条件，是否有任何问题因为它永远不会进入第二个

if($(window).scrollTop() > eyemoveleft) { 

           console.log("seconfif");
            $('.blink').addClass( "move-left");
            $('.blink1').addClass( "move-left");
        }

<强> JSFIDDLE

第二种方法

 if(eyemoveright< $(window).scrollTop() && $(window).scrollTop() > eyemoveleft) { 

           console.log("seconfif");
            $('.blink').addClass( "move-left");
            $('.blink1').addClass( "move-left");
        }

<强> 2nd Method JSFIDDLE

After removing class

Answer 2

你应该在每个部分使用循环并为已经到达的部分设置一个标志。

INPUT("01/" || substr(t1.Yearmonth, 5,2) ||"/"|| substr(t1.Yearmonth, 1, 4),ddmmyy10.)

http://jsfiddle.net/ashish1bhagat/zvkjfk6r/7/

Answer 3

你应该添加：

if($(window).scrollTop() < eyemoveright) { 
  $('.blink').removeClass( "move-right");
  $('.blink1').removeClass( "move-right");
}

如下所示。

  var eyemoveright = $(".bounceInRight h2").offset().top;
  var eyemoveleft = $(".bounceInLeft h2").offset().top;
  $(window).scroll(function() {
    
    if($(window).scrollTop() > eyemoveright) { 
      

      $('.blink').addClass( "move-right");
      $('.blink1').addClass( "move-right");
    } 

    if($(window).scrollTop() < eyemoveright) { 
      

      $('.blink').removeClass( "move-right");
      $('.blink1').removeClass( "move-right");
    } 

    if($(window).scrollTop() > eyemoveleft) { 
     
     
      $('.blink').addClass( "move-left");
      $('.blink1').addClass( "move-left");
    }               
  });

.blink, .blink1{ background-color:#fff; width:3px; height:3px; position:absolute; animation: blink 2s steps(5, start) infinite; -webkit-animation: blink 2s steps(5, start) infinite; left:90px; top:64px;  }
  .blink1{ left:124px; top:65px;  }
  @keyframes blink {
    to {
      visibility: hidden;
    }
  }
  @-webkit-keyframes blink {
    to {
      visibility: hidden;
    }
  }
  
  .blink.move-right{left:50px;}
  .blink1.move-right{left:56px;}


  .blink.move-left{left:10px;}
  .blink1.move-left{left:15px;}
  .animation-image{ width:200px; height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animation-image text-center" style="position:fixed;  background-color:red;"><span class="blink1 hidden-mob"></span><span class="blink hidden-mob"></span></div>
<br><br><br><br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</p>

<div class="clearfix"></div>
<div class="col-sm-5  bounceInRight">
  <h2>Letraset sheets containing Lorem Ipsum pa</h2>
</div>

<div class="clearfix"></div>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <div class="col-sm-5  bounceInLeft">
    <h2>Letraset sheets containing Lorem Ipsum pa</h2>
  </div>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <div class="col-sm-5  bounceInRight">
      <h2>Letraset sheets containing Lorem Ipsum pa</h2>
    </div>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <div class="col-sm-5  bounceInRight">
      <h2>Letraset sheets containing Lorem Ipsum pa</h2>
    </div>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <div class="col-sm-5  bounceInRight">
      <h2>Letraset sheets containing Lorem Ipsum pa</h2>
    </div>

jquery scrollto top height issue

3 个答案: