hide fixed div content when scrolling

Question

I got this script:

<script>
window.addEventListener("scroll",function() { 
   if(window.scrollY > 200) {
      $('#menuFixo').slideUp(400).fadeIn(400);
   }
   else {
      $('#menuFixo').slideDown(400).fadeOut(400);
   }
}, false);
</script>

How do I to hide #menuFixo content when I'm scrolling? This script is almost done, but I got some issues, when I've scrolling serveral times the effects keep running for each scroll behavior with delay. Probrably is needle set a timeout to avoid unnecessary repeating. I need exactly that #menuFixo's content start hiding when I'd scrolling on 200px of page, and stop hiding before this.

Example with the same issue, try scrolling up and down several times, the page keep hiding with delay: http://jsfiddle.net/LJVMH/

I'll explain my case, I got this menu called #menuFixo, when the page is on the top I want to show it, but when the user is scrolling the page means that he is looking for something else, so I'll clean the page, removing my menu to improve the user experience, the script's goal is to have a clean page (without menu) my customer would can to find faster what he wants. But after scrolling I want to show again my menu (animated), now It would can be useful to him.

It looks like you would like to do some parallax related. As of that I suggest to read this [Parallax Done Right](https://medium.com/@dhg/parallax-done-right-82ced812e61c) — t.niese, Feb 23 '15 at 17:44
Guilhaume, It doesn't worked how I wished. I want permanently to hide the element "on scrolling", It'll appear again only "on scrolling out". It keeps blinking. — vinoli, Feb 23 '15 at 17:44
@vinoli, yes you're right. Sorry.. I updated my answer. I whish it would help. — Guy, Feb 23 '15 at 18:16

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

You can try this (I use animate() instead of fadeIn() and test the animation with .not(':animated') before animate) :

<script>
        var isAnimated = false;

        $.fn.scrollEnd = function(callback, timeout) {          
          $(this).scroll(function(){
            var $this = $(this);
            if ($this.data('scrollTimeout')) {
              clearTimeout($this.data('scrollTimeout'));
            }
            $this.data('scrollTimeout', setTimeout(callback,timeout));
          });
        };

        $(window).scrollEnd(function (event) {    
            if ($("#menuFixo").is(":hidden") || isAnimated) {
                $("#menuFixo").stop(true, true).slideDown(400).animate(
                    { opacity: 1 },
                    { queue: false, duration: 400 }
                );
            }
        }, 200);

        $(window).scroll(function (event) {    
            if (!$("#menuFixo").is(":hidden") && $("#menuFixo").not(':animated') && $(this).scrollTop() > 200) {
                isAnimated = true;
                $("#menuFixo").slideUp(400);$("#menuFixo").animate(
                    { opacity: 0 },
                    { queue: false, duration: 400 }, function() {
                        // Animation complete.
                        isAnimated = false;
                    }
                );
            }
        });
</script>

Edit : jQuery extension that adds a scrollEnd event

Edit 2 : To avoid side effects on the animation, you can use a flag (isAnimated) to show your menu even if an animation is curently processed. And you can also pass true values to the stop() function to remove queued animation and complete the current animation immediately (doc).

Here your updated fiddle : http://jsfiddle.net/LJVMH/213/

edited May 23 '17 at 10:24

Community

1
1

answered Feb 23 '15 at 17:34

Guy

1,434
1
19
33

Guillaume, almost there, as a fixed element, it would appear after scrolling. It doesn't in your sample. – vinoli Feb 23 '15 at 18:50
I found another issue, when I tried scrolling up and down several times and faster, it gets hidden. – vinoli Feb 23 '15 at 18:54
just to be sure : you want to display your fixed element when scroll position is over 200px ? http://jsfiddle.net/LJVMH/207/ – Guy Feb 23 '15 at 18:57
Exactly, but hiding when I'm still scrolling. – vinoli Feb 23 '15 at 19:06
You want hiding your element for each scroll or only if it start from top ? http://jsfiddle.net/LJVMH/209/ – Guy Feb 23 '15 at 19:22
Both, It'll start hiding on x position and for each scroll when I'm scrolling it'll be hided, but I want to show when the scrolling is stopped. – vinoli Feb 23 '15 at 19:32
Guiillaume Deroy, I'll explain my case, I got this menu called #menuFixo, when the page is on the top I want to show it, but when the user is scrolling the page means that he is looking for something else, so I'll clean the page, removing my menu to improve the user experience, with a clean page (without menu) my customer would can to find faster what he wants. But after scrolling I want to show again my menu (animated), now It would can be useful to him. – vinoli Feb 23 '15 at 19:43
Guillaume Woow, It's perfect, thank you for your contribuition, I'm from old school and learned a lot with your sample. – vinoli Feb 23 '15 at 20:20
Guillaume I just found a little issue, when I on the bottom and the slide effect is been processed if I scroll up, the effect is stopped and my menu gets hidden. – vinoli Feb 23 '15 at 20:26
You're welcome. To avoid these side effects you can use a flag (`isAnimated`) to show your menu even if an animation is curently processed. And you can also pass true values to the `stop()` function to remove queued animation and complete the current animation immediately ([doc](https://api.jquery.com/stop/)). I'll include this in my answer. – Guy Feb 23 '15 at 22:11

hide fixed div content when scrolling

1 Answers1