偏移（）。顶部 - 从顶部50％？

Question

如何让它从顶部偏移50％？我还尝试添加- ($window.height()/2)

我可以设置像素$(this).offset().top - 800)的距离，但我想用百分比代替。 50％只是随意的，可能是25％等等。

如果想知道，这是完整的脚本：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

据我理解;滚动50％的视口

时，您希望显示div

当您滚动超过视口的一半时，以下代码段将显示模式框。如果您打算这样做，那么您可以修改if语句中的代码以执行任意数量的操作，可能性是无穷无尽的！

如果这不是您打算做的，请随时详细说明。

注意：我使用window.innerHeight来更好地理解（它与$(window).height()具有相同数量的字符！它在这种情况下也意味着相同的事情）。此外，我没有使用jQuery（纯javascript），我正在做一些花哨的setTimeout来显示模态，然后在2秒后将其淡出。

有关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>