偏移（）.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>