Question

滚动到达某个元素时的那些触发器在重新调整大小时无效，但在重新调整大小后重新加载时有效。那么即使在浏览器重新调整大小之后如何使触发器工作也是如此，我猜想它会破坏div的位置？

browser re-size but after reloading its works fine

#main {
    width: 100%;
}
nav {

    position: fixed;
   top: 5%;
    height: 30%;
    text-align: center;
    display: block; 

    z-index: 999;
    width: 100%;

        
}
nav a {
    font-size: 20px;
    font-family: 'Montserrat';
  color: #808080;
  text-decoration: none; 
 text-transform:uppercase;
 opacity: 0.9;


  word-spacing: normal;
  display:inline-block;
  width: 176px;
  height: 30px;
  padding-top: 7px;
  z-index: 999;
  
 
}


html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#test {position: 
         relative;
    
    width: 100%;
    height: 100%;
    background-color: #ffd800;


}
#test2 {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;
background-color: #b6ff00;


}



#test3 {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;
background-color: #0026ff;

}
#link {
    border-bottom: #0ff 2.5px solid;
 
 
}


#test4 {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;
background-color: #4cff00;


}

#test5 {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;
background-color: #b6ff00;


}
#link:hover {
    color: #aaa7a7;
}
#link2:hover {
    color: #aaa7a7;
}
#link3:hover {
    color: #aaa7a7;
}
#link4:hover {
    color: #aaa7a7;
}#link5:hover {
    color: #aaa7a7;
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="style.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
         <script src="smoothscroll.js"></script>   
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
         <script>
             $(document).ready(function () {
                 var a = $('#test').offset().top;
                 var b = $('#test2').offset().top;
                 var c = $('#test3').offset().top;
                 var d = $('#test4').offset().top;
                 var e = $('#test5').offset().top;

                 $(document).scroll(function () {
                     if ($(this).scrollTop() >= a) {
                         $('#link').css({ "border-bottom": "#0ff 2px inset" });

                     }
                 
                     if ($(this).scrollTop() >= b) {
                         $('#link2').css({ "border-bottom": "#0ff 2px inset" });
                         $('#link').css({ "border-bottom": "#fff" });

                     }
                     else {
                    $('#link2').css({ "border-bottom": "#fff" });

                     }
                     if ($(this).scrollTop() >= c) {
                         $('#link3').css({ "border-bottom": "#0ff 2px inset" });
                         $('#link2').css({ "border-bottom": "#fff" });


                     }
                        else {
                    $('#link3').css({ "border-bottom": "#fff" });

                     }
                     if ($(this).scrollTop() >= d) {
                         $('#link4').css({ "border-bottom": "#0ff 2px inset" });
                         $('#link3').css({ "border-bottom": "#fff" });

                     }
                        else {
                    $('#link4').css({ "border-bottom": "#fff" });

                     }
                     if ($(this).scrollTop() >= e) {
                         $('#link5').css({ "border-bottom": "#0ff 2px inset" });
                         $('#link4').css({ "border-bottom": "#fff" });

                     }
                        else {
                    $('#link5').css({ "border-bottom": "#fff" });

                     }

                 });




             });
        </script>
    
         </head>
    <body>

     

        <nav>
        <a id="link" href="#test"  class="smoothScroll" >About</a>
            <a id="link2" href="#test2"  class="smoothScroll">Our aims</a>
    <a id="link3" href="#test3"  class="smoothScroll">App contents</a>
                <a id="link4" href="#test4"  class="smoothScroll">Download</a>
                <a id="link5" href="#test5"  class="smoothScroll">Contact us</a>
        </nav>


   
             
  </div>
         
              </div>
        <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
        <div id="test">
    
            </div> 
             <div id="test2">
        
        </div>
        
             <div id="test3">
       
        </div>
           <div id="test4">
    
        </div>
          <div id="test5">
 
        </div>
     
    </body>
</html>

`

Answer 1

使用此代码..使用变量和if语句检查创建一个函数然后在文档就绪，窗口滚动和窗口调整大小中运行它

var a , b , c , d , e;
var changeoffset = function(){
     a = $('#test').offset().top;
     b = $('#test2').offset().top;
     c = $('#test3').offset().top;
     d = $('#test4').offset().top;
     e = $('#test5').offset().top;
     if ($(this).scrollTop() >= a) {
          $('#link').css({ "border-bottom": "#0ff 2px inset" });
      }
      if ($(this).scrollTop() >= b) {
          $('#link2').css({ "border-bottom": "#0ff 2px inset" });
          $('#link').css({ "border-bottom": "#fff" });
      }else{
          $('#link2').css({ "border-bottom": "#fff" });
      }
      if ($(this).scrollTop() >= c) {
          $('#link3').css({ "border-bottom": "#0ff 2px inset" });
          $('#link2').css({ "border-bottom": "#fff" });
      }else{
          $('#link3').css({ "border-bottom": "#fff" });
      }
      if ($(this).scrollTop() >= d) {
          $('#link4').css({ "border-bottom": "#0ff 2px inset" });
          $('#link3').css({ "border-bottom": "#fff" });
       }else {
          $('#link4').css({ "border-bottom": "#fff" });
       }
       if ($(this).scrollTop() >= e) {
          $('#link5').css({ "border-bottom": "#0ff 2px inset" });
          $('#link4').css({ "border-bottom": "#fff" });
       }else{
          $('#link5').css({ "border-bottom": "#fff" });
       }
}
changeoffset();
$(window).on('resize',changeoffset);
$(window).on('scroll',changeoffset);

浏览器调整大小后，Jquery不能完美地工作吗？

1 个答案: