Offset ().top - 50% from the top?

Question

How can I make it offset by 50% from the top? I also tried adding - ($window.height()/2)

I can set a distance of pixels $(this).offset().top - 800) but I want to use percentages instead. 50% was just arbitrary, it could be 25%, etc.

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); } }); }; 

Answer 1

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.

Here is a working fiddle Fiddle

Answer 2

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.

Answer 3

From what I understand; you want to show a div when you scroll 50% of the viewport

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 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 ). 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.

More on window.innerHeight here

 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>