javascript - 为什么我的 div 不能在滚动时淡入

Question

我有一个容器 div，我不想在他滚动位置时淡入。

我不知道为什么我的代码不起作用。这是 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