Question

当我到达锚点时，我试图触发一个元素向上滑动（编辑：通过滚动）。锚ID为#blacksection，元素类为.vc_tta-panels-container。我在另一个帖子中读到，使用锚点触发JS动画的最佳方法是使用以下内容从锚点触发onclick事件：

jQuery("#blacksection").trigger('click');

然后我正在使用;

  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();

作为剩下的JS。所以我有这个：

<script>
jQuery("#blacksection").trigger('click');
  jQuery("#blacksection").on('click', function() {
    jQuery(".vc_tta-panels-container").slideUp();
});
</script>

哪个不起作用，只是刚刚开始学习JS并且让我感到困惑，任何人都可以在用户滚过锚点时为某个类触发slideUp()。{ {1}}）？

Answer 1

在使用click函数调用.trigger()事件之前，需要先定义#blacksection事件。此外，根据单击事件的.triggerHandler()类型的默认行为，您可能希望使用jQuery("#blacksection").on('click', function() { jQuery(".vc_tta-panels-container").slideUp(); }); jQuery("#blacksection").triggerHandler('click');代替，它仅调用用户定义的事件：

.vc_tta-panels-container

修改

鉴于你的评论有些澄清，上述解决方案无法奏效。当滚动期间/之后#blacksection元素在屏幕上显示时，您希望$(document).ready(function() { function Utils() { } Utils.prototype = { constructor: Utils, isElementInView: function (element, fullyInView) { var pageTop = $(window).scrollTop(); var pageBottom = pageTop + $(window).height(); var elementTop = $(element).offset().top; var elementBottom = elementTop + $(element).height(); if (fullyInView === true) { return ((pageTop < elementTop) && (pageBottom > elementBottom)); } else { return ((elementTop <= pageBottom) && (elementBottom >= pageTop)); } } } var Utils = new Utils(); $('#scrollsection').scroll(function() { var isElementInView = Utils.isElementInView($('#blacksection'), false); if (isElementInView) { $('.vc_tta-panels-container').slideUp(); } else { $('.vc_tta-panels-container').slideDown(); } }); });元素向上滑动。

值得庆幸的是，有人已在此处提供此解决方案：Check if element is visible after scrolling

要根据您的问题定制它，这里有一些HTML和适当的JS代码片段：

＆＃13;
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="vc_tta-panels-container" style="position: fixed; width: 100%; height: 100px; background-color: #f00"> <span>I will slide up when the word "BAZ" comes into view below</p> </div> <div id="scrollsection" style="position:fixed; top: 100px; width: 100%; bottom: 0; overflow-y: scroll"> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> .<br> <div id="blacksection">BAZ</div> .<br> .<br> .<br> .<br> .<br> .<br> </div>
＆＃13;
message.body
＆＃13;
＆＃13;
＆＃13;

在锚点触发.slideUp（滚动）

1 个答案: