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

改变动画类型和时间

1 个答案: