偏移（）.top - 頂部50％？

Question

如何使它從頂部偏移50％？我也嘗試添加- ($window.height()/2)

我可以設置像素距離$(this).offset().top - 800)但我想使用百分比代替。 50％只是任意的，也可能是25％，等等。

以下是完整的腳本，如果想知道：

// 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 - 800) { 
 
     \t // show 'div' when scrolling 
 
\t \t 
 
\t 
 
\t \t 
 
     \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

我認爲你的分工運營商正確的軌道上。這個工作對我來說：

$(window).on("scroll", function(){ 
    var halfHeight = $(window).height()/2; 
    if ($(window).scrollTop() > halfHeight) { 
    alert("Window has reached 50%"); 
    } 
}); 

，你可以把它改成我只是用在滾動下面的小提琴演示$(window).scroll(function()。

這裏是工作提琴Fiddle

Answer 2

什麼

<style> 
class fifty { 
    position:fixed; 
    top: 50%; 
} 
</style> 

如果您並不總是希望元素從頂部50％，使用jQuery來添加/刪除類。

Answer 3

從我的理解;要顯示一個div當您滾動視

下面的代碼片段的50％，將顯示一個模式對話框，當你滾過視的一半。如果這是您打算執行的操作，那麼您可以修改if語句中的代碼來執行任意數量的操作，的可能性是無窮的！

如果這不是你打算做的，那麼請隨意闡述。

注：我使用window.innerHeight更好地瞭解（！它具有相同的字符量$(window).height()這也意味着在這種情況下同樣的事情）。此外，我不使用jQuery（純JavaScript），我正在做一些花哨的setTimeout的顯示模式，然後淡出2秒後。

更多關於window.innerHeighthere

var tHandle; 
 

 
(function() { 
 
    
 
    function showDiv() { 
 
    
 
    var elem = document.getElementById('modal'); 
 
    
 
    if (tHandle) { clearTimeout(tHandle); } 
 
    
 
    elem.classList.add('open'); 
 
    
 
    tHandle = setTimeout(function() { 
 
     elem.classList.add('fadeIn'); 
 
     tHandle = setTimeout(function() { 
 
     elem.classList.remove('fadeIn'); 
 
     tHandle = setTimeout(function() { 
 
      elem.classList.remove('open'); 
 
     }, 400); 
 
     }, 2000); 
 
    }, 100); 
 
    
 
    }; 
 

 
    window.addEventListener('scroll', function() { 
 
    
 
    var doc = document.documentElement; 
 
    var scrollTop = window.pageYOffset || doc.scrollTop - (doc.clientTop || 0); 
 
    
 
    if (scrollTop > (window.innerHeight/2)) { 
 
     showDiv(); 
 
    } 
 
    
 
    }); 
 

 
})();

#modal { 
 
    position: fixed; 
 
    top: 40%; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    transition: opacity 400ms ease; 
 
    opacity: 0; 
 
    display: none; 
 
    background: #ccc; 
 
    padding: 10px; 
 
} 
 

 
#modal.open { 
 
    display: block!important; 
 
} 
 
#modal.fadeIn { 
 
    opacity: 1!important; 
 
}

<div id="modal">You've scrolled past half of the window (viewport) height!</div> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p> 
 
<p>This is some text</p>