更改动画类型和时间

Question

我有代码可以在用户向下滚动时淡出我的菜单，并在用户向上滚动时淡入。

我希望它在用户向上滚动的任何时候淡入，而不仅仅是当他们到达页面顶部时。

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>

Answer 1

请参阅此 answer 以供参考。要做到这一点非常简单。正如我在 Josiah Ruddel 链接到的答案中所示，您必须将用户的初始滚动条位置与用户的新滚动条位置进行比较。您的代码可能如下所示

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

更改动画类型和时间

changing animation type and timing

html

javascript

jquery

scrolltop