CODEWITHSUNDEEP
javascriptjquery
user2252219
user2252219

Reputation: 865

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

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

Upvotes: 0

Views: 4598

Answers (3)

Vince
Vince

Reputation: 1851

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

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>

Upvotes: 0

Steve K
Steve K

Reputation: 9055

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

Upvotes: 2

Jacob Brazeal
Jacob Brazeal

Reputation: 654

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.

Upvotes: 0

Related Questions