Fatal编程技术网
  • javascript/
  • Javascript 滚动时设置我的div动画&；div come窗口中间位置

Javascript 滚动时设置我的div动画&；div come窗口中间位置

javascript jquery html css twitter-bootstrap

Javascript 滚动时设置我的div动画&；div come窗口中间位置,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我需要一个jquery/js功能，当用户滚动页面时，某个div位于中间位置，然后我的div慢慢消失。我不希望精确，但至少有一些是最近的。当它向上或向下滚动时，这两个时间都应该设置为该div的动画 我可以给动画效果，但如何窗口的中间位置将发生，我不能。我尝试累了 我的html代码如下： <div class="vts"> <div class="container top-cut-white"> <div class="r

我需要一个jquery/js功能，当用户滚动页面时，某个div位于中间位置，然后我的div慢慢消失。我不希望精确，但至少有一些是最近的。当它向上或向下滚动时，这两个时间都应该设置为该div的动画

我可以给动画效果，但如何窗口的中间位置将发生，我不能。我尝试累了

我的html代码如下：

   <div class="vts">
        <div class="container top-cut-white">
            <div class="row">
                <div class="animatable fadeInUp">
                    <div class="col-md-6">
                        <h3>AGD Vehicle Tracking System (VTS)</h3>
                        <p>With AGD gps vehicle tracking and asset tracking your mobile workforce need never be out of sight or mind.</p>
                        <br>
                        <h3>Benefits of Vehicle Tracking</h3>
                        <ul>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Real-time visibility of your mobile workforce</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Reduce fuel costs, mileage and emissions</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase control of overtime costs</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Boost productivity and workforce utilisation</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase customer satisfaction through improved communication</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Obtain detailed insight to help drive your business forward efficiently</li>
                        </ul>
                    </div>
                    <div class="animatable fadeInUp">
                        <div class="col-md-6">
                            <img src="img/agd_vts_software.png" class="img-responsive" alt="agdits">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                if (($animatable.offset().top + $animatable.height() - 20) < offset) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>
我的js代码如下：

   <div class="vts">
        <div class="container top-cut-white">
            <div class="row">
                <div class="animatable fadeInUp">
                    <div class="col-md-6">
                        <h3>AGD Vehicle Tracking System (VTS)</h3>
                        <p>With AGD gps vehicle tracking and asset tracking your mobile workforce need never be out of sight or mind.</p>
                        <br>
                        <h3>Benefits of Vehicle Tracking</h3>
                        <ul>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Real-time visibility of your mobile workforce</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Reduce fuel costs, mileage and emissions</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase control of overtime costs</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Boost productivity and workforce utilisation</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Increase customer satisfaction through improved communication</li>
                            <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Obtain detailed insight to help drive your business forward efficiently</li>
                        </ul>
                    </div>
                    <div class="animatable fadeInUp">
                        <div class="col-md-6">
                            <img src="img/agd_vts_software.png" class="img-responsive" alt="agdits">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                if (($animatable.offset().top + $animatable.height() - 20) < offset) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>


jQuery（函数（$）{
变量doAnimations=函数（）{
变量偏移量=$（窗口）.scrollTop（）+$（窗口）.height（），
$animatables=$（'.animatable'）；
如果（$animatables.size（）==0）{
$（窗口）.off（'scroll'，doAnimations）；
}
$animatables.每个（函数（i）{
var$animatable=$（这个）；
如果（$animatable.offset（）.top+$animatable.height（）-20）
这里给出的例子。
我需要，当动画div出现在窗口/页面中间位置时，动画就会发生，也许这会有所帮助。确定DIV是否位于屏幕中间的示例：

演示：

HTML:

<div id="middle"></div>
<div id="page">
    <div id="target"></div>   
</div>

body{
    padding:0; margin:0;
}
#page{
    padding-top:400px;
    height:2280px;
    z-index:100;
}
#target,#middle{    
    background-color:red;
    height:50px; width:200px;
}
#middle{
    background-color:#000;
    position:fixed; top:400px; left:0;
    height:1px; width:100%;
    z-index:1000;
}

var middle=0;
var deviation=5;
var $target;
var targetH=0;

$(function(){    
    $(window).scrollTop(200);//## fot test

    $target = $('#target');

    //## calculates the middle of the screen
    targetH = $target.height();    
    var windowH = $(window).height();
    middle= (windowH - targetH)/2;    

    $('#middle').css('top',middle);//## fot test

    //## on scroll event
    $( window ).scroll(function(){
        getPositon();
    })    
})

function getPositon()
{
    //## calculates the relative position of the target
    var topT = $target.offset().top;    
    var topW = $(window).scrollTop();
    var top = topT - topW;

    //## calculates the relative position of the target middle
    var middleT=top+targetH/2;

    var animate=false;//## fot test
    if(middleT + deviation > middle && middleT - deviation < middle)
    {   
        //########
        //ANIMATE
        //########
        animate=true;//## fot test
    }        
    $target.text('ANIMATION: '+animate);//## fot test

}
JS:

<div id="middle"></div>
<div id="page">
    <div id="target"></div>   
</div>

body{
    padding:0; margin:0;
}
#page{
    padding-top:400px;
    height:2280px;
    z-index:100;
}
#target,#middle{    
    background-color:red;
    height:50px; width:200px;
}
#middle{
    background-color:#000;
    position:fixed; top:400px; left:0;
    height:1px; width:100%;
    z-index:1000;
}

var middle=0;
var deviation=5;
var $target;
var targetH=0;

$(function(){    
    $(window).scrollTop(200);//## fot test

    $target = $('#target');

    //## calculates the middle of the screen
    targetH = $target.height();    
    var windowH = $(window).height();
    middle= (windowH - targetH)/2;    

    $('#middle').css('top',middle);//## fot test

    //## on scroll event
    $( window ).scroll(function(){
        getPositon();
    })    
})

function getPositon()
{
    //## calculates the relative position of the target
    var topT = $target.offset().top;    
    var topW = $(window).scrollTop();
    var top = topT - topW;

    //## calculates the relative position of the target middle
    var middleT=top+targetH/2;

    var animate=false;//## fot test
    if(middleT + deviation > middle && middleT - deviation < middle)
    {   
        //########
        //ANIMATE
        //########
        animate=true;//## fot test
    }        
    $target.text('ANIMATION: '+animate);//## fot test

}

var中间值=0；
var偏差=5；
var$目标；
var targetH=0；
$（函数（）{
$（窗口）.scrollTop（200）；/###fot测试
$target=$（“#target”）；
//##计算屏幕的中间部分
targetH=$target.height（）；
var windowH=$（window.height（）；
中间=（窗口H-目标）/2；
$（“#中间”）.css（'top'，middle）；/##fot检验
//##滚动事件
$（窗口）。滚动（函数（）{
getposition（）；
})    
})
函数getposition（）
{
//##计算目标的相对位置
var topT=$target.offset（）.top；
var topW=$（window.scrollTop（）；
var top=topT-topW；
//##计算目标中间点的相对位置
var middleT=顶部+目标/2；
var animate=false；//##fot测试
如果（中间+偏差>中间和中间-偏差<中间）
{   
//########
//生动活泼
//########
动画=真；/###fot测试
}        
$target.text（'ANIMATION:'+animate）；/##fot测试
}
也许这会有所帮助。确定DIV是否位于屏幕中间的示例：

演示：

HTML:

<div id="middle"></div>
<div id="page">
    <div id="target"></div>   
</div>

body{
    padding:0; margin:0;
}
#page{
    padding-top:400px;
    height:2280px;
    z-index:100;
}
#target,#middle{    
    background-color:red;
    height:50px; width:200px;
}
#middle{
    background-color:#000;
    position:fixed; top:400px; left:0;
    height:1px; width:100%;
    z-index:1000;
}

var middle=0;
var deviation=5;
var $target;
var targetH=0;

$(function(){    
    $(window).scrollTop(200);//## fot test

    $target = $('#target');

    //## calculates the middle of the screen
    targetH = $target.height();    
    var windowH = $(window).height();
    middle= (windowH - targetH)/2;    

    $('#middle').css('top',middle);//## fot test

    //## on scroll event
    $( window ).scroll(function(){
        getPositon();
    })    
})

function getPositon()
{
    //## calculates the relative position of the target
    var topT = $target.offset().top;    
    var topW = $(window).scrollTop();
    var top = topT - topW;

    //## calculates the relative position of the target middle
    var middleT=top+targetH/2;

    var animate=false;//## fot test
    if(middleT + deviation > middle && middleT - deviation < middle)
    {   
        //########
        //ANIMATE
        //########
        animate=true;//## fot test
    }        
    $target.text('ANIMATION: '+animate);//## fot test

}
JS:

<div id="middle"></div>
<div id="page">
    <div id="target"></div>   
</div>

body{
    padding:0; margin:0;
}
#page{
    padding-top:400px;
    height:2280px;
    z-index:100;
}
#target,#middle{    
    background-color:red;
    height:50px; width:200px;
}
#middle{
    background-color:#000;
    position:fixed; top:400px; left:0;
    height:1px; width:100%;
    z-index:1000;
}

var middle=0;
var deviation=5;
var $target;
var targetH=0;

$(function(){    
    $(window).scrollTop(200);//## fot test

    $target = $('#target');

    //## calculates the middle of the screen
    targetH = $target.height();    
    var windowH = $(window).height();
    middle= (windowH - targetH)/2;    

    $('#middle').css('top',middle);//## fot test

    //## on scroll event
    $( window ).scroll(function(){
        getPositon();
    })    
})

function getPositon()
{
    //## calculates the relative position of the target
    var topT = $target.offset().top;    
    var topW = $(window).scrollTop();
    var top = topT - topW;

    //## calculates the relative position of the target middle
    var middleT=top+targetH/2;

    var animate=false;//## fot test
    if(middleT + deviation > middle && middleT - deviation < middle)
    {   
        //########
        //ANIMATE
        //########
        animate=true;//## fot test
    }        
    $target.text('ANIMATION: '+animate);//## fot test

}

var中间值=0；
var偏差=5；
var$目标；
var targetH=0；
$（函数（）{
$（窗口）.scrollTop（200）；/###fot测试
$target=$（“#target”）；
//##计算屏幕的中间部分
targetH=$target.height（）；
var windowH=$（window.height（）；
中间=（窗口H-目标）/2；
$（“#中间”）.css（'top'，middle）；/##fot检验
//##滚动事件
$（窗口）。滚动（函数（）{
getposition（）；
})    
})
函数getposition（）
{
//##计算目标的相对位置
var topT=$target.offset（）.top；
var topW=$（window.scrollTop（）；
var top=topT-topW；
//##计算目标中间点的相对位置
var middleT=顶部+目标/2；
var animate=false；//##fot测试
如果（中间+偏差>中间和中间-偏差<中间）
{   
//########
//生动活泼
//########
动画=真；/###fot测试
}        
$target.text（'ANIMATION:'+animate）；/##fot测试
}
只要尝试更改脚本中的
条件，以反映您的逻辑：


$（窗口）.scrollTop（）
提供当前滚动位置


$（window）.height（）
将为您提供窗口的总高度，因此

$（window）.height（）/2
将为您提供窗口的中间位置

因此，您的逻辑应该是：如果$（窗口）.scrollTop（）>$（窗口）.height（）/2和$（窗口）.scrollTop（）<$（窗口）.height（）/2

但这失败了，因为我们无法获得准确的滚动位置，使其大于或小于当前的scoll位置，因此请尝试考虑一些偏移长度，例如20或10，甚至5，现在您的逻辑是：

if($(window).scrollTop()-10 < $(window).height()/2 && $(window).scrollTop()+10 > $(window).height()/2)

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                    if($(window).scrollTop()-15 < $(window).height()/2 && $(window).scrollTop()+15 > $(window).height()/2) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>

if（$（窗口）.scrollTop（）-10<$（窗口）.height（）/2&&$（窗口）.scrollTop（）+10>$（窗口）.height（）/2）
所以你的JS代码应该是：

if($(window).scrollTop()-10 < $(window).height()/2 && $(window).scrollTop()+10 > $(window).height()/2)

<script>
    jQuery(function ($) {

        var doAnimations = function () {
            var offset = $(window).scrollTop() + $(window).height(),
                $animatables = $('.animatable');

            if ($animatables.size() == 0) {
                $(window).off('scroll', doAnimations);
            }
            $animatables.each(function (i) {
                var $animatable = $(this);
                    if($(window).scrollTop()-15 < $(window).height()/2 && $(window).scrollTop()+15 > $(window).height()/2) {
                    $animatable.removeClass('animatable').addClass('animated');
                }
            });

        };

        $(window).on('scroll', doAnimations);
        $(window).trigger('scroll');

    });
</script>


jQuery（函数（$）{
变量doAnimations=函数（）{
变量偏移量=$（窗口）.scrollTop（）+$（窗口）.height（），
$animatables=$（'.animatable'）；
如果（$animatables.size（）==0）{
$（窗口）.off（'scroll'，doAnimations）；
}
$animatables.每个（函数（i）{
var$animatable=$（这个）；
如果（$（窗口）.scrollTop（）-15<$（窗口）.height（）/2&&$（窗口）.scrollTop（）+15>$（窗口）.height（）/2）{
$animatable.removeClass（'animatable'）.addClass（'animated'）；
}
});
};
$（窗口）.on（'scroll'，doAnimations）；
$（window.trigger（'scroll'）；
});
希望有帮助。

只要尝试更改脚本中的
条件，以反映您的逻辑：


$（窗口）.scrollTop（）
提供当前滚动位置


$（window）.height（）
将为您提供窗口的总高度，因此

$（window）.height（）/2
将为您提供窗口的中间位置

因此，您的逻辑应该是：如果$（窗口）.scrollTop（）>$（窗口）.height（）/2和$（窗口）.scrollTop（）<$（窗口）.height（）/2

但这失败了，因为我们无法得到准确的滚动位置，既大于也小于当前的滚动位置，所以请尝试考虑一些偏移长度