Question

我是html和jquery的新手。对于写得不好的code.i设计了一个滚动触发的导航栏，在w3school.com上使用jquery完成一些滚动后修复了。但是如果你滚动有一些小故障使用鼠标然后在导航栏固定之前有一点延迟或者说一点混蛋，在稳定滚动时观察它。我希望你们有人理解我想说的wat。我想达到这样的平滑度： - http://www.w3schools.com/css/default.asp

Jquery代码写在最后： -

  <!DOCTYPE html>
 <html>

 <head><title>home</title>
 <style>       <!-- css css css css css css-->
*{box-sizing:border-box}
 body{margin:0}
    div.header{margin:0
       padding:0
       max-width:100%;
       height:auto;

       background-color:black;

         }

      img.header{width:100%;
                  display:block;
               }

      nav.fixed{position:fixed;top:0;width:100%;z-index:10}
      nav{background-color:#4CAF50;z-index:10}

      nav a{display:inline-block;
            text-decoration:none;
            color:white;
           padding:15px 25px;
          margin:0;margin-right:-4px; transition-duration: 0.4s;
          }    
       nav a:hover{background-color:white;
        color:black;
        }      

         div.sidebar{
                   width:200px;
                    float:left;
                    height:700px;
                    background:gray;
                    padding:5px;
                    overflow-y:scroll;
                    }
                  div.sidebarFixed{position:fixed;top:38px;}            
                div.section{width:65%;position:relative;left:200px;
                  height:2000px;
                background:#f2f2f2;}            



      </style>     <!--css css css css css css css-->

     <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">             </script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  </head>


  <body>

        <div class="header">
        <img class="header" src="images/top.jpg" alt="journal of advance      science & environment" />

      </div>
     <nav class="nv" id="n">

         <a href="#">menu one</a>
         <a href="#">menu two</a>
          <a href="#">menu three</a>
          <a href="#">menu one</a>
           <a href="#">menu one</a>



      </nav>    


     <div class="section">

     </div>
       <script>
      jQuery(document).ready(function(){

     var navOffset=jQuery("nav").offset().top;
    jQuery("nav").wrap('<div class="placeholder" ></div>');
    jQuery("div.placeholder").height(jQuery("nav").outerHeight());


    jQuery(window).scroll(function(){

    var scrollPos=jQuery(window).scrollTop();

    if(scrollPos >= navOffset){

        jQuery("nav").addClass("fixed");            
        jQuery(".sidebar").addClass("sidebarFixed");

    }else{
        jQuery("nav").removeClass("fixed");
        jQuery(".sidebar").removeClass("sidebarFixed");
     }

     });    

     })
    </script>



     </body>


    </html>

Answer 1

我认为你所拥有的东西确实存在任何问题。我确实发现了你的css的几个语法问题（缺少分号和什么不是）并且在修复之后它似乎在我的结尾工作正常。我做的另一件事是将你的样式从内联单独分成外部表单，这使它更具可读性。

＆＃13;

jQuery(document).ready(function(){

    	var navOffset=jQuery("nav").offset().top;
    	jQuery("nav").wrap('<div class="placeholder" ></div>');
    	jQuery("div.placeholder").height(jQuery("nav").outerHeight());


    	jQuery(window).scroll(function(){

    	var scrollPos=jQuery(window).scrollTop();

    	if(scrollPos >= navOffset){

        	jQuery("nav").addClass("fixed");            
        	jQuery(".sidebar").addClass("sidebarFixed");

    	}else{
        	jQuery("nav").removeClass("fixed");
        	jQuery(".sidebar").removeClass("sidebarFixed");
    	 }

     	});    

     })

＆＃13;

*{
	-webkit-box-sizing:border-box;
	moz-box-sizing:border-box;
	ms-box-sizing:border-box;
	box-sizing:border-box
}
 
body{
	margin:0
}
div.header{
	margin:0;
    padding:0;
    max-width:100%;
    height:auto;
    background-color:black;
}
img.heaer{
	width:100%;
    display:block;
}
nav.fixed{
	position:fixed;
	top:0;
	width:100%;
	z-index:10
}
nav{
	background-color:#4CAF50;
	z-index:10
}
nav a{
	display:inline-block;
    text-decoration:none;
    color:white;
    padding:15px 25px;    
	margin-right:-4px; 
	transition-duration: 0.4s;
}    
nav a:hover{
	background-color:white;
    color:black;
}      
div.sidebar{
	width:200px;
    float:left;
    height:700px;
    background:gray;
    padding:5px;
    overflow-y:scroll;
}
div.sidebarFixed{
	position:fixed;
	top:38px;
}            
div.section{
	width:65%;
	position:relative;
	left:200px;
    height:2000px;
    background:#f2f2f2;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
	<title>home</title>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">             </script>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>


<body>

	<div class="header">
		<img class="header" src="images/top.jpg"        alt="journal of advance      science & environment" />

	</div>
	<nav class="nv" id="n">
		<a href="#">menu one</a>
		<a href="#">menu two</a>
		<a href="#">menu three</a>
		<a href="#">menu one</a>
		<a href="#">menu one</a>
	</nav>    
	<div class="section">

	</div>
 </body>
</html>

＆＃13;

将它与w3schools进行比较似乎工作方式基本相同。我会考虑重组一些你的标记。特别是你的导航列表。

一些滚动完成后如何防止滚动触发固定导航栏中的突然颠簸？

1 个答案: