CODEWITHSUNDEEP
javascriptjquery
user2252219
user2252219

Reputation: 865

Show hidden div when scrolled halfway through viewport

EDIT Hopefully this is more clear. :)

Right now, as you scroll down, you'll notice that the pink colored div only appears when it touches the top of the viewport. How can I make it appear when it touches half way through the viewport?

https://jsfiddle.net/1p751fz5/

// 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) {
      	// 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: 1

Views: 1583

Answers (1)

Josh Sanger
Josh Sanger

Reputation: 804

This can be done with jquery. Here is a fiddle: https://jsfiddle.net/s13gjnwt/16/

On scroll, get the window height, the amount the user has scrolled, and the top position of the hidden div. (I set an offset of half the window height so the div won't appear until after it's in 50% in the viewport)

JS

$(window).on('scroll', function(){
  var scrollAmount = $(window).scrollTop();
  var windowHeight = $(window).height();
  var halfHeight = $(window).height() / 2;
  var topOfHiddenDiv = $('.hidden-div').offset().top;
  if(((scrollAmount + windowHeight) - halfHeight) >= topOfHiddenDiv && !$('.hidden-div').hasClass('show')) {
    $('.hidden-div').addClass('show');
  }
});

.content {
  padding-top: 1000px;
}
.hidden-div {
  background: lightblue;
  color: @white;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 300px;
}
.hidden-div.show {
  opacity: 1;
}

NOTE: Make sure to scroll down in the fiddle

Upvotes: 2

Related Questions