onScroll() disables mouseenter() on same element

Question

I'm trying to bind two event handlers for the same element but when onScroll() is triggered, mouseenter won't work any reason for that and work around?

   var main = function() {
  $(window).scroll(function() {
 if ($(window).scrollTop() > 900) {

$(".swap").delay(900).animate({
        opacity: 1, 
        marginRight: 0
    }, 'slow'
);
 }
  });
 $(".swap").mouseenter(function(){

  $(".swap").fadeOut('fast', function() {
    $(".swap-hidden").fadeIn("slow");
    $(".mobile p").last().append('and tablets')
  });
  });

  };
  $(document).ready(main);

Answer 1

This is because mouseenter requires the actual page coordinates (x and y) and scrolling changes them dynamically, so you need to rebind (or check for) mouseenter after each scroll event.

Your options are:

1. Switch mouseenter with hover.

2. Rewrite your function like this (include your mouseenter function into the document.ready function:

   var main = function() {
       $(window).scroll(function() {
           if ($(window).scrollTop() > 900) {
               $(".swap").delay(900).animate({
                   opacity: 1,
                   marginRight: 0
               }, 'slow');
           }
           $(".swap").mouseenter(function() {
               $(".swap").fadeOut('fast', function() {
                   $(".swap-hidden").fadeIn("slow");
                   $(".mobile p").last().append('and tablets')
               });
           });
       };
   });
   $(document).ready(main);