个人中心
gpt4 book ai didi

javascript - 有人可以解释为什么这个错误发生在我的导航栏上吗？

转载 作者：行者123 更新时间：2023-11-28 00:17:24 25 4
gpt4 key购买 nike

如果你仔细观察，当你快速向下滚动时，导航栏会在消失前瞬间变黑。如何防止此错误发生？

我想用导航栏做什么: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>

.我该如何阻止这种情况发生？

最佳答案

发生这种情况是因为您在 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意味着我们正在下降，否则我们假设我们正在上升。如果我们往上走，就会添加 solid 类。但是既然你合并了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>

关于javascript - 有人可以解释为什么这个错误发生在我的导航栏上吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55029849/

25 4 0
文章推荐： javascript - 按下按钮时动态注入(inject)脚本
文章推荐： c++ - 如何设计具有不同返回类型的基类和派生类？
文章推荐： php - XPath - 使用 php xpath 从父级获取文本
文章推荐： css - 在父 div 中添加垂直子 div(均为固定宽度)，父级具有动态水平滚动条