Question

如果您仔细观察，则快速向下滚动时，导航栏会在不消失之前变黑一秒钟。如何防止该错误的发生？

我正在尝试使用导航栏： 1.除导航栏中的文本外，导航栏应在页面顶部透明。 2.当您向下滚动页面时，导航栏应完全消失，文本也应消失 3.在页面底部向上滚动时，导航栏应重新出现黑色背景。

$(document).ready(function() {
        // Transition effect for navbar 
        $(window).scroll(function() {
          // checks if window is scrolled more than 500px, adds/removes solid class
          if($(this).scrollTop() > 500) { 
              $('.header').addClass('solid');
          } else {
              $('.header').removeClass('solid');
          }
        });

  
});

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 505;

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 350);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
   
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').addClass('no-bar').removeClass('solid');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('no-bar');
        }
    }
    
    lastScrollTop = st;
}

/************************************************HEADER*********************************************************/
 
body {
 height:500%;
 padding-bottom: 500%;
 background: green;
}

 .header {
 	box-sizing: border-box;
 	width: 100vw
  padding-top: 6%;
 	padding-bottom: 6%;
  position: fixed;
  top: 0%;
  left: 0%;
  padding-right: 100vw;
  transition: top 0.2s ease-in-out;
  z-index: 324;
  border-bottom: 0%;
  background-color: transparent;
  transition: background-color 1s ease 0s;
 }

 .solid {
  background-color: black;
  transition: background-color 1s ease 0s;
  box-shadow: 0 0 4px grey;
 }

 .no-bar {
 opacity: 0;
 }

  .logo {
    color: yellow;
    position: inline-block;
    position: absolute;
    top: 38%;
    margin-top: 0%;
    padding: 0;
    left: 37%;
  }



  .nav-fade {
    opacity: 0;
    transition: 0.5s;
  }

    .section-1 {
  position: relative;
  top:80%;
  padding-top: 6%;
  padding-bottom: 50%;
  height: 200%;
  width: 100%;
  background: green;
 }

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" type="text/css" href="STACK-HEADER.CSS">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head>

<body>
		<header class="header">
			<div class="logo">
				<h1>HEADER</h1>
			</div>
		</header>
			<section class="section-1">
	    </section>


		<section class="section-1">
	    </section>

		<script type="text/javascript" src="STACK-HEADER.JS"></script>
</body>
</html>

。如何阻止这种情况发生？

Answer 1

之所以会这样，是因为您在if中合并了两个条件：

    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').addClass('no-bar').removeClass('solid');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('no-bar');
        }
    }

t > lastScrollTop表示我们要下降，否则就假设我们要上升。如果我们要前进的话，将添加实体类。但是由于您已经合并了t > lastScrollTop && st > navbarHeight，所以这意味着我们假设st <= navbarHeight时都将向上移动。

因此，当我们向下滚动顶部附近时，会显示实心条。

您只需要这样重写这段代码即可：

    if (st > lastScrollTop){
            // Scroll Down
            if (st > navbarHeight) {
                $('header').addClass('no-bar').removeClass('solid');
            }
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                $('header').removeClass('no-bar');
            }
        }

请注意else！

下面的工作片段：

    $(document).ready(function() {
            // Transition effect for navbar 
            $(window).scroll(function() {
              // checks if window is scrolled more than 500px,
              // adds/removes solid class
              if($(this).scrollTop() > 500) { 
                  $('.header').addClass('solid');
              } else {
                  $('.header').removeClass('solid');
              }
            });

      
    });

    var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = 505;

    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 350);

    function hasScrolled() {
        var st = $(this).scrollTop();
        
        
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
       
        if (st > lastScrollTop){
            // Scroll Down
            if (st > navbarHeight) {
                $('header').addClass('no-bar').removeClass('solid');
            }
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                $('header').removeClass('no-bar');
            }
        }
        
        lastScrollTop = st;
    }

    
 
    /************************HEADER*********************************/
     
    body {
     height:500%;
     padding-bottom: 500%;
     background: green;
    }

     .header {
     	box-sizing: border-box;
     	width: 100vw
      padding-top: 6%;
     	padding-bottom: 6%;
      position: fixed;
      top: 0%;
      left: 0%;
      padding-right: 100vw;
      transition: top 0.2s ease-in-out;
      z-index: 324;
      border-bottom: 0%;
      background-color: transparent;
      transition: background-color 1s ease 0s;
     }

     .solid {
      background-color: black;
      transition: background-color 1s ease 0s;
      box-shadow: 0 0 4px grey;
     }

     .no-bar {
     opacity: 0;
     }

      .logo {
        color: yellow;
        position: inline-block;
        position: absolute;
        top: 38%;
        margin-top: 0%;
        padding: 0;
        left: 37%;
      }



      .nav-fade {
        opacity: 0;
        transition: 0.5s;
      }

        .section-1 {
      position: relative;
      top:80%;
      padding-top: 6%;
      padding-bottom: 50%;
      height: 200%;
      width: 100%;
      background: green;
     }

      }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>

    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="STACK-HEADER.CSS">
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1" /> 
    </head>

    <body>
    		<header class="header">
    			<div class="logo">
    				<h1>HEADER</h1>
    			</div>
    		</header>
    			<section class="section-1">
    	    </section>


    		<section class="section-1">
    	    </section>

    		<script type="text/javascript" src="STACK-HEADER.JS"></script>
    </body>
    </html>

有人可以解释为什么此错误在我的导航栏中发生吗？

1 个答案: