當通過視口中途滾動時顯示隱藏div

Question

編輯希望這更清楚。 :)

現在，當您向下滾動時，您會注意到只有在觸摸視口頂部時纔會顯示粉紅色的div。當它通過視口時，我怎樣才能讓它出現？

https://jsfiddle.net/1p751fz5/

// constants 
 
var BTN_CLS = 'owl-thumb-item', 
 
\t \t BTN_ANIMATION_MILLIS = 200, 
 
\t \t DIV_ANIMATION_MILLIS = 1000; 
 

 
// document ready handler 
 
$(document).ready(function() { 
 
\t 
 
    // display buttons from first 'div' 
 
    showBtns('one', BTN_CLS); 
 
    
 
    // window scroll handler 
 
    $(window).scroll(function() { 
 
    $('.hidden').each(function(i, v) { 
 
     if ($(window).scrollTop() > $(this).offset().top) { 
 
     \t // show 'div' when scrolling 
 
     \t showDiv($(this), onCompleteDivAnimation($(this))); 
 
     } 
 
    }); 
 
    }); 
 

 
}); 
 

 
/** 
 
* Used to show an animated 'div' and perform some actions. 
 
* @param {Function} completeCallback Action performed after animation. 
 
* @param {Object} div Target element. 
 
*/ 
 
function showDiv(div, completeCallback) { 
 
    // check if 'div' is currently animated and avoid animation queue 
 
    if (!div.is(':animated')) { 
 
    div.animate({ 
 
     opacity: 1 
 
    }, { 
 
     complete: completeCallback, 
 
     duration: DIV_ANIMATION_MILLIS 
 
    }); 
 
    } 
 
}; 
 

 
/** 
 
* Used to perform actions after completing a 'div' animation. 
 
*/ 
 
function onCompleteDivAnimation(div) { 
 
\t showBtns(div.prop('id'), BTN_CLS); 
 
}; 
 

 
/** 
 
* Used to show button(s) from a 'div' element. 
 
* @param {String} divId Target element Id. 
 
* @param {String} btnCls Button(s) CSS class. 
 
*/ 
 
function showBtns(divId, btnCls) { 
 
    var btnGroup = getBtnGroup(divId, btnCls); 
 

 
    animateBtn(btnGroup); 
 
}; 
 

 
/** 
 
* Used for creating a group of button(s) from a 'div' element. 
 
* @param {String} divId Target element Id. 
 
* @param {String} btnCls Button(s) CSS class. 
 
* @returns {Array} btnGroup 
 
*/ 
 
function getBtnGroup(divId, btnCls) { 
 
    var domBtns = $('#' + divId + ' .' + btnCls), 
 
    btnGroup = []; 
 

 
    for (var i = 0; i < (domBtns || []).length; ++i) { 
 
    btnGroup.push(domBtns[i]); 
 
    } 
 

 
    return btnGroup; 
 
}; 
 

 
/** 
 
* Used to animate a button group that normally comes from a 'div' element. 
 
*/ 
 
function animateBtn(btnGroup) { 
 
\t btnGroup = btnGroup || []; 
 

 
    $(btnGroup.shift()).fadeIn(BTN_ANIMATION_MILLIS, function() { 
 
    if (btnGroup.length > 0) { 
 
     animateBtn(btnGroup); 
 
    } 
 
    }); 
 
};

Answer 1

這可以使用jQuery來完成。這裏是一個小提琴：https://jsfiddle.net/s13gjnwt/16/

在滾動上，獲取窗口高度，用戶滾動的數量和隱藏div的頂部位置。 （我設置這樣的股利將不會出現，直到它的後50％的視窗口高度的一半的偏移量）

JS

$(window).on('scroll', function(){ 
    var scrollAmount = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var halfHeight = $(window).height()/2; 
    var topOfHiddenDiv = $('.hidden-div').offset().top; 
    if(((scrollAmount + windowHeight) - halfHeight) >= topOfHiddenDiv && !$('.hidden-div').hasClass('show')) { 
    $('.hidden-div').addClass('show'); 
    } 
}); 

.content { 
    padding-top: 1000px; 
} 
.hidden-div { 
    background: lightblue; 
    color: @white; 
    padding: 30px; 
    opacity: 0; 
    transition: opacity 0.3s; 
    margin-bottom: 300px; 
} 
.hidden-div.show { 
    opacity: 1; 
} 

注意：請務必在小提琴

向下滾動