Question

我有一个容器div，当他滚动位置时，我不想去FadeIn。

我不知道为什么我的代码不起作用。这是JSFIDDLE http://jsfiddle.net/Q2TYv/2195/

上的链接

HTML

<div class="container-fluid contact nopadding hideme" id="contact">
    <div class="mainContainer">
        <div class="contacttitle">
            <hr class="hrtitle"/><h2 class="fontraleway">CONTACT US</h2><hr class="hrtitle"/>
        </div>
        <span class="subtitle">Wanna ask us something? Use the form below.</span>

        <div class="row nopadding nomargin">
            <div class="col-sm-offset-3 col-sm-6">
                <form>  
                    <input type="name" class="form-control" id="exampleInputName" placeholder="Name*">
                    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email adress*">
                    <input type="subject" class="form-control" id="exampleInputSubject" placeholder="Subject">
                    <textarea class="form-control" rows="5" id="comment" placeholder="Message*"></textarea>
                    <button type="button" class="btn btn-lg btn-block">S U B M I T</button>
                </form>
            </div>
        </div>
    </div><!--Closed div mainContainer-->
</div><!--Closed div contact-->

CSS

opacity:0;

的jQuery

(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });

});

Answer 1

所以问题是窗口的底部永远不会超过对象的底部，所以你可以使用底部边距向上推动对象，或者你可以这样做：

if( bottom_of_window >= bottom_of_object)

您也想在开始时$(document).ready(function() ...

Here's a plunkr

Answer 2

我认为你正试图在滚动上做一些互动。你的方法不正确。试试这个way。

$(window).scroll(function () {
 var scroll = $(window).scrollTop() + $(window).height();
 var bottom_of_object = $(".hideme").offset().top;
 if (scroll > bottom_of_object) {
    hide();
 }
});

function hide() {
 $('.hideme').animate({
    opacity: '1'
  }, 2000);
}

您可以在css中使用转换，只在javascript中添加类。这将表现得更好。

为什么我的div不能在Scroll上进行淡入淡出

2 个答案: