Question

我正在使用ID为first,second and third的三个div。在我的第一个div中，我打了三个班d,c,e。我也在我的第二个div中打电话给这个班级。当我的页面向下滚动并且我的第三个div在视图中时，所有这些我称为d，c，e的类应该被删除。我假设这些应该通过jquery或通过jquery动画效果来完成。任何人都可以建议我如何从我的div中删除所有这些类。我的类包含.png文件。如何通过jquery编写窗口滚动效果的代码并删除所有这些类。

HTML 我的页面 jQuery Parallax插件演示

</head>

    <body>

    <div id="first" >
       <div class="d" >
        <div class="c">
            <div class="e"></div>



       This is my first div to display image.


     </div>
     </div>

   </div>
 </div>
<div id="second">
</div>
<div id="third">
</div> 

 </body>
</html>

CSS

 @charset "utf-8";
#first, #second{
    width: 100%;
 }
 #first{

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;

}
#first .d{
    margin: auto;
    position:relative;
    width:=218px;
    height: 73px;
    left: auto;
    top: 10%;
    background: url('images/Logo.png') top left;
    background-repeat: no-repeat;
    background-position-x:50px;

}
#first .c{
    margin: auto;
    position:relative;
    width: =774px;
    height: 209px;
    left: auto;
    top: 120%;
    /*width:=137px;
    height:88px;*/
    background: url('images/big_text.png');
    background-repeat: no-repeat;
    background-position-x:339px;
}
 #first .e{
    margin: auto;
    position:relative;
    width: =127px;
    height: 37px;
    left:auto;
    top: 180%;
    background: url('images/scroll_text.png');
    background-repeat: no-repeat;
    background-position-x: 680px;
}

Answer 1

你可以使用JQuery来做到这一点。下面的代码删除了＃34; first＆＃34;中的所有类。格

{{1}}

Answer 2

//updated
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>    
    $(window).scroll(function () {        
        if ($("#first").offset().top + $("#first").height() < $(document).scrollTop()) {
            var obj = $('#first').children('div');
            if (obj.hasClass("d")) {
                obj.removeClass();
            }
            obj = obj.children('div');
            if (obj.hasClass("c")) {
                obj.removeClass();
            }
            obj = obj.children('div');
            if (obj.hasClass("e")) {
                obj.removeClass();
            }
        } else {
            var obj = $('#first').children('div');
            if (obj.hasClass("d") == false) {
                obj.addClass("d");
            }
            obj = obj.children('div');
            if (obj.hasClass("c") == false) {
                obj.addClass("c");
            }
            obj = obj.children('div');
            if (obj.hasClass("e") == false) {
                obj.addClass("e");
            }
        }
    });


</script>

Answer 3

这将使用窗口滚动和第三个元素位置

来完成

(Rails_app)/public/assets/twitter/fonts/glyphicons-halflings-regular.ttf

$(window).scroll(function (event) {
  
    var elemTop = $("#third").offset().top;
  var elemBottom = elemTop + $("#third").height();
  
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    // element in window viewport remove the classes
    if(elemTop <= docViewBottom && $("#first").find('.d').length > 0)
    {
      console.log("no more classes for the first div");
      $("#first").find('.d, .c, .e').removeClass();
     }
     // element is not more in window viewport and the divisions have no class then
     // add these classes
     else if((elemTop > docViewBottom || elemBottom < docViewTop) 
             && $("#first").find('.d').length == 0)
     {
       console.log("classes back to first div");
         $("#first div:eq(0)").addClass("d");
         $("#first div:eq(1)").addClass("c");
         $("#first div:eq(2)").addClass("e");
     }
    
});

@charset "utf-8";
#first, #second{
    width: 100%;
 }
 #first{

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;
    border: 1px solid red;

}

 #second{

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;
    border: 1px solid blue;

}

 #third{

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
    color: white;
    height: 600px;
    margin: 0 auto;
    padding: 160px 0 0 0;
    padding: 0;
     perspective: 1px;
    border: 1px solid yellow;

}

#first .d{
    margin: auto;
    position:relative;
    width:218px;
    height: 73px;
    left: auto;
    top: 10%;
    background: url('images/Logo.png') top left;
    background-repeat: no-repeat;
    background-position-x:50px;

}
#first .c{
    margin: auto;
    position:relative;
    width: 774px;
    height: 209px;
    left: auto;
    top: 120%;
    /*width:=137px;
    height:88px;*/
    background: url('images/big_text.png');
    background-repeat: no-repeat;
    background-position-x:339px;
}
 #first .e{
    margin: auto;
    position:relative;
    width: 127px;
    height: 37px;
    left:auto;
    top: 180%;
    background: url('images/scroll_text.png');
    background-repeat: no-repeat;
    background-position-x: 680px;
}

使用jquery的窗口滚动效果

3 个答案: