changing animation type and timing

Question

I have code which fades out my menu when user scrolls down, and fades in when user scrolls up.

I would like it to fade in ANYTIME the user scrolls up not just when they reach the top of the page.

js

$ = jQuery.noConflict();

  $(document).ready(function(){
    $(window).scroll(function(){
    $("#s-nav").css("opacity", 1 - $(window).scrollTop() /300);
  });

});

 $ = jQuery.noConflict();
 $(document).ready(function() {
    
    var previous_scroll_val = 0; //or whatever you choose.
    $(window).scroll(function() {
        var now_scroll_val = $(this).scrollTop();
        if (now_scroll_val < previous_scroll_val) {
            //User is scrolling up...
            $("#s-nav").css("opacity", 0 + $(window).scrollTop() /300);
        }
        else {
            //User is scrolling down...
            $("#s-nav").css("opacity", 1 - $(window).scrollTop() /300);
        }
        previous_scroll_val = current_scroll_val; //<-- Most important line Without this, scroll event will only trigger on 0px scrollTop
    });
 });

#s-nav { 
 position: fixed;
 z-index: 999;
 top: 0;
 width: 100%; height: 100px;
 padding-top: 25px;
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="s-nav">
 
  <div class="col-sm-4">
   <a href="#" id="s-logo"></a>
  </div>
  
     <div class="col-sm-8 align-right">
     <p>menu</p> 
     </div>
 
 </nav> 

<div>
 <p>page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content page content </p> 
 </div>

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

1

See this answer for reference. To achieve this is very simple. As I showed in the answer I linked to by Josiah Ruddel, you have to compare the initial scrolltop position of the user to the new scrolltop position of the user. Your code could look as follows

$ = jQuery.noConflict();
$(document).ready(function() {
    var previous_scroll_val = 0; //or whatever you choose.
    $(window).scroll(function() {
        var now_scroll_val = $(this).scrollTop();
        if (now_scroll_val < previous_scroll_val) {
            //User is scrolling up...
            $("#s-nav").css("opacity", 1 - $(window).scrollTop() /300);
        }
        else {
            //User is scrolling down...
        }
        previous_scroll_val = current_scroll_val; //<-- Most important line Without this, scroll event will only trigger on 0px scrollTop
    });
});

edited May 23 '17 at 12:22

Community

1
1

answered Jul 02 '16 at 21:12

Arnav Borborah

11,357
8
43
88

when scrolling down I want it to remain faded out, do I have to initially set the opacity of the menu to 0 in css – user3550879 Jul 02 '16 at 21:37
Yes, that is exactly what you have to do, to make sure it doesn't become visible scrolling down. – Arnav Borborah Jul 02 '16 at 22:02
I thought so but it doesn't show at all when I do that – user3550879 Jul 02 '16 at 22:21
Correct me if I misinterpreted your comment. The animation doesn't trigger when scrolling down, so once you go down, if you scroll up, it should trigger. My recommendation is to add the same animation except fading out for when the user scrolls down. Also, technically your event isn't fading in or out, its just that for every pixel scrolled up and down, the opacity changes by a slight amount. Could you maybe provide a [jSFiddle](https://jsfiddle.net/) of your code? – Arnav Borborah Jul 02 '16 at 22:54
I can only seem to get it to animate/fade in when the user reaches the top from scrolling up, and fade out when a distance from the top scrolling down. So the scrolling down works fine, but I want the fade in to trigger Whenever the user starts to scroll up, even if they are at the bottom of the screen – user3550879 Jul 02 '16 at 23:13
Could you provide a jsFiddle, with all your HTML and CSS code? I will try and look for a solution. I think the problem lies with you setting the opacity to a number based on the scrolltop. – Arnav Borborah Jul 02 '16 at 23:44
added a snippet into the question with code (with changes you recommended) – user3550879 Jul 03 '16 at 19:10
Ok, so I made a JSfiddle of your code and noticed the error lies between this line: `$("#s-nav").css("opacity", **0 + $(window).scrollTop() /300**);`. The error is simple, so you can implement easily the solution yourself. The problem is this. You made the opacity equivalent to the scrolltop/300. The css opacity property only accepts numbers between 0 and 1. If you noticed, the fadein animation stops at the point when the scrollTop is greater than 300, meaning at those times, the opacity is > 1, explaining why it doesn't work farther below. (eg: 500 scrolltop/300=1.66. NOT VALID.) – Arnav Borborah Jul 04 '16 at 00:18

changing animation type and timing

1 Answers1