Question

我在线研究了一段时间没有关于如何在滚动时让div淡入淡出。我观看/阅读了几个教程，似乎都没有正常工作。它要么根本不起作用，要么Div完全看不见而且无法加载。我不知道我的代码是否存在问题，或者方法不正确。是否有更好的解决方案让DIV在向下滚动时淡出？

继承人：https://jsfiddle.net/0zvrjg9b/

继承人Github：https://github.com/Darkstar93/Resume

感谢您的帮助

＆＃13;

$(function() {
    $(window).scroll( function(){
    
       
        $('#fadeInBlock').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it  */
            bottom_of_window = bottom_of_window + 200;  
          
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                    
            }
        }); 
    
    });
});

＆＃13;

/* Load scroll */

.fadeInBlock {
	opacity: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="xp">
        <h1 id="work">Work Experience</h1>
        <div class="sprintxp" id="fadeInBlock">
            <img alt="sprintlogo" id="sprintlogo" src="images/sprint.png">
            <p id="jobs">Technical Consultant</p>
            <p id="dates">December 2014 - December 2015</p>
            <ul class="sprintul">
                <li>Performed software and hardware repairs on devices which
                reduced phone replacements.</li>
                <li>Conducted inventory checks which resulted in lowering the
                accessory, and device, discrepancies.</li>
                <li>Maintained near-perfect customer satisfaction scores for
                entirety of employment.</li>
                <li>Established a base of loyal customer clientele allowing me
                to consistently surpass quotas.</li>
                <li>Utilized in store sales systems such as SalesForce to close
                transactions and create opportunities.</li>
                <li>Adapted quickly to new technological innovations within the
                cell phone industry and memorized new company promotional plans
                on a monthly basis, resulting in less churn rate and high
                customer satisfaction.</li>
            </ul>
        </div>
        <div class="mensxp" id="fadeInBlock">
            <img alt="menswarehouselogo" id="menslogo" src="images/mens.png">
            <p id="jobs">Sales Associate</p>
            <p id="dates">February 2014 - August 2014</p>
            <ul class="mensul">
                <li>Improved store displays by implementing my personal designs
                and creativity.</li>
                <li>Provided all customers with outstanding customer
                service.</li>
                <li>Product knowledge leader for all new merchandise and trends
                in men’s fashion.</li>
                <li>Highest sales per quarter.</li>
                <li>Responsible for training of new hires to be effective sales
                representatives.</li>
            </ul>
        </div>
    </div>
    <div class="education" id="fadeInBlock">
        <h1 id="edu">Education</h1>
        <div class="uvuedu">
            <img alt="uvulogo" id="uvulogo" src="images/uvu.png">
            <h3>Utah Valley University</h3>
            <p>Associates of Science</p>
            <p>Major: Business Management</p>
            <p>Graduation - Fall 2017</p>
        </div>
        <div class="thinkfuledu" id="fadeInBlock">
            <img alt="thinkfullogo" id="thinklogo" src="images/thinkful.png">
            <h3>Thinkful</h3>
            <p>Online Course</p>
            <p>Front End Web Developer</p>
            <p>Graduation - February 2015</p>
        </div>
    </div>
</body>
</html>

＆＃13;

滚动jQuery淡入Div

0 个答案: