[英]Offset ().top - 50% from the top?
How can I make it offset by 50% from the top? 如何使它从顶部偏移50%? I also tried adding
- ($window.height()/2)
我也尝试添加
- ($window.height()/2)
I can set a distance of pixels $(this).offset().top - 800)
but I want to use percentages instead. 我可以设置像素的距离
$(this).offset().top - 800)
但是我想使用百分比。 50% was just arbitrary, it could be 25%, etc. 50%只是任意的,可能是25%,依此类推。
Here is the full script if wondering: 如果想知道,这是完整的脚本:
// constants var BTN_CLS = 'owl-thumb-item', BTN_ANIMATION_MILLIS = 200, DIV_ANIMATION_MILLIS = 1000; // document ready handler $(document).ready(function() { // 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) { // show 'div' when scrolling 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) { 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) { btnGroup = btnGroup || []; $(btnGroup.shift()).fadeIn(BTN_ANIMATION_MILLIS, function() { if (btnGroup.length > 0) { animateBtn(btnGroup); } }); };
I think your on the right track with the division operator. 我认为您与部门运营商的合作正轨。 This works for me:
这对我有用:
$(window).on("scroll", function(){
var halfHeight = $(window).height() / 2;
if ($(window).scrollTop() > halfHeight) {
alert("Window has reached 50%");
}
});
you can change it to $(window).scroll(function()
I just used on scroll for the fiddle demo below. 您可以将其更改为
$(window).scroll(function()
我刚刚在滚动上使用的下面的小提琴演示。
What about 关于什么
<style>
class fifty {
position:fixed;
top: 50%;
}
</style>
If you don't always want the elements 50% from the top, use jQuery to add/remove the class. 如果您不总是希望元素从顶部到顶部50%,请使用jQuery添加/删除类。
From what I understand; 据我了解; you want to show a div when you scroll 50% of the viewport
您想在滚动视口的 50%时显示div
The following code snippet will show an modal box when you scroll past half of the viewport . 当您滚动到视口的一半时,以下代码段将显示一个模式框。 If this is what you are intending to do then you can modify the code in the
if
statement to perform any number of actions, the possibilities are endless ! 如果这是您要执行的操作,则可以修改
if
语句中的代码以执行任意数量的操作, 可能性是无限的 !
If this is not what you are intending to do then please feel free to elaborate. 如果您不打算这样做,请随时进行详细说明。
Note: I am using window.innerHeight
for better understanding (it has the same amount of characters as $(window).height()
! it also means the same thing in this scenario ). 注意:我正在使用
window.innerHeight
来更好地理解(它与$(window).height()
具有相同数量的字符! 在这种情况下,它的含义也相同 )。 Also, I am not using jQuery (pure javascript) and I am doing some fancy setTimeout
's to show the modal and then fade it out after 2 seconds. 另外,我没有使用jQuery(纯JavaScript),而是在做一些花哨的
setTimeout
来显示模式,然后在2秒后淡出它。
More on window.innerHeight
here 更多关于
window.innerHeight
在这里
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.