Trigger .slideUp at anchor (scroll)

Question

I'm trying to trigger an element to slide up when I reach an anchor (EDIT: via scroll). The anchor ID is #blacksection and the element class is .vc_tta-panels-container. I read on another thread that the best way to use an anchor to trigger a JS animation is to trigger an onclick event from the anchor using something like:

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

And then I'm using;

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

as the remaining JS. So I have this:

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

Which isn't working, only just started learning JS and it's baffling my mind, can anyone shed some light on triggering slideUp() for a class when the user scrolls past an anchor (#blacksection)?

score 1 · Answer 1 · edited May 23 '17 at 12:26

The click event needs to be defined before you call it with the .trigger() function. Also, depending on what sort of default behaviour #blacksection has on the click event, you may wish to use .triggerHandler() instead, which invokes only the user-defined events:

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

EDIT:

Given your comment, which clarifies things somewhat, the above solution won't work. You want the .vc_tta-panels-container element to slide up when the #blacksection element comes into view on screen during/after scrolling.

Thankfully, someone already has this solution here: Check if element is visible after scrolling

To tailor it to your problem, here is a snippet with some HTML and appropriate JS:

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

});

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

Hi thanks for this, this is the html: `-`. I did have `onclick=".slideUp"` in there as well but it isn't working, do you know how I can link this up correctly? — , May 16 '17 at 23:31
The code I gave above should be sufficient. Since your `` element does not have an `href="{target}"` tag you should be able to use either `.trigger('click')` or `.triggerHandler('click')` to the same effect. If the script is still not working for you, you may need to wrap the entire thing in a `$(document).ready(function() { ..... });` statement, to ensure that your jQuery library loads before the script does. — e_i_pi, May 16 '17 at 23:55
Hi thanks again :), this is my JS: `` and HTML: `-`. Should this be working? — , May 17 '17 at 00:06
I've added a snippet to demonstrate functionality. Looking at your original question, it's a little ambiguous... did you want the `slideUp()` only to occur once the `#blacksection` element is clicked? — e_i_pi, May 17 '17 at 00:27
Almost, I'm looking to trigger the `slideUp()` for the `.vc_tta-panels-container` when the user scrolls down, past the anchor `#blacksection` rather than on click. I read on another thread that the best way to trigger JS animations from an anchor is to assign an `onclick` action to the anchor. Looking at the code you provided I feel I'm missing JS that defines the scroll action? — , May 17 '17 at 12:28
Righto, I misunderstood your original request. What you want is for a section to slide up once something else comes into view on the screen. You don't need click events at all, the scroll event is what you need along with a test for visibility. See my edited answer above. — e_i_pi, May 17 '17 at 23:16

Trigger .slideUp at anchor (scroll)

1 Answers1