Question

我在这里遇到了一个奇怪的问题。我设计了一个粘性导航栏和粘性侧边栏，在页面滚动后粘在顶部。但是我无法弄清楚div部分标题的问题当达到滚动阈值时，标题向左移动。当导航条和侧边栏固定在顶部时，它会同时发生。为什么地狱标题不在左边，因为它应该是正常的条件？请帮帮我。

我无法添加代码段，所以我在这里粘贴所有代码。

HTML

          <!DOCTYPE html>
          <html>

          <head><title>home</title>
          <link type="text/css" rel="stylesheet" href="stylesheet.css" />
          <meta charset="utf-8">
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="java/script.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="respNav">

                 <a class="resp" href="#">Home</a>
                 <a class="resp" href="#">Aims and Scope</a>
                 <a class="resp" href="#">Editorial Board</a>
                 <a class="resp" href="#">Author's guidelines</a>
                 <a class="resp" href="#">Contact us</a>
                 <a id="icon" href="#">Menu</a> 


            </nav>  

       <div class="sidebar">

                 <h2 class="sidebar">Quick Links</h2>
                 <ul class="sidebar">
                 <li>dummy grgree </li>
                 <li>dummyummy </li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummyssfs</li>
                 <li>dummysfsf</li>
                 <li>dummysfsf</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummysfsf</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummyddwe</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummyzzzz</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy33333</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy</li>
                 <li>dummy third last</li>
                 <li>dummy sec last</li>
                 <li>dummy last</li>


                 </ul>




            </div>
         <div class="section">
         <h1>heading</h1>


         </div>

      <!--  <script>
        function myFunction() {
          var x = document.getElementById("respNav");
       if (x.className === "nv") {
         x.className += " responsive";
        } else {
             x.className = "nv";
          }
       }
       </script>-->


     </body>


     </html>

CSS

          *{box-sizing:border-box}
         body{margin:0}
       /*=================================================================
                     HEADER
       ===================================================================*/

        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:#e3a836;
        border-bottom:2px solid #00384d;
        border-top:2px solid #00384d;
          z-index:10
         }


        nav a{display:inline-block;
        text-decoration:none;
         color:white;
       font-size:20px;
       font-family: calibri;
       padding:15px 25px;
        letter-spacing:2px;
        margin:0;
        margin-right:-4px;
       transition-duration: 0.4s;
        }

          nav.nv a#icon{display:none;}                             

       nav a:hover{background-color:#00384d;

        }      

         div.sidebar{
                   width:200px;
                  float:left;
                  height:650px; 
                  background:#00384d;
                  padding:5px;
                  overflow-y:scroll;
                  }

             h2.sidebar{
                        padding:0 20px;
                        margin-left:-4px;
                        margin-right:-4px;
                        background:#e3a836;
                        }


                   ul.sidebar{list-style-type:none;
                              padding:0 0 0 0;
                              margin:0 0 50px 0;
                              } 
                 ul.sidebar li{margin:5px -4px 5px -4px;  
                  font-size:18px;
                 padding:0 5px 0 10px;
                  color:white;
                      }
        ul.sidebar li:nth-child(odd){background:#004761}

         div.sidebarFixed{
                         position:fixed;
                         top:48px;
                        }   

           div.section{width:65%;
                      position:relative;
                    left:300px;
                    top:50px;
                   height:2000px;
                  background:#f2f2f2;
                    }           












               /*=====================================================
                                 MEDIA SCREEN
                             ===============*/
           @media only screen and (max-width: 800px){

         nav.nv {width:100%;z-index:10;border-top:2px solid red;border-                bottom:2px solid green;}
          nav.nv a.resp{display: none;}
            nav.nv a#icon{display:inline-block;
              width:100%;
              }

          nav.nv.responsive a{display:block;}



            }

的JavaScript

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

            }); 
          })

Answer 1

您的问题是您对position: fixed;类使用了不必要的div.sidebarFixed样式。删除该样式，标题保持原位。

https://jsfiddle.net/DTcHh/25312/

请尝试使用此代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="java/script.js"></script>

<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="respNav">

    <a class="resp" href="#">Home</a>
    <a class="resp" href="#">Aims and Scope</a>
    <a class="resp" href="#">Editorial Board</a>
    <a class="resp" href="#">Author's guidelines</a>
    <a class="resp" href="#">Contact us</a>
    <a id="icon" href="#">Menu</a>


  </nav>

  <div class="sidebar">

    <h2 class="sidebar">Quick Links</h2>
    <ul class="sidebar">
      <li>dummy grgree </li>
      <li>dummyummy </li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummyssfs</li>
      <li>dummysfsf</li>
      <li>dummysfsf</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummysfsf</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummyddwe</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummyzzzz</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy33333</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy</li>
      <li>dummy third last</li>
      <li>dummy sec last</li>
      <li>dummy last</li>


    </ul>




  </div>
  <div class="section">
    <h1>heading</h1>


  </div>

  <!--  <script>
        function myFunction() {
          var x = document.getElementById("respNav");
       if (x.className === "nv") {
         x.className += " responsive";
        } else {
             x.className = "nv";
          }
       }
       </script>-->


</body>


</html>

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

      });
    })

     * {
       box-sizing: border-box
     }

     body {
       margin: 0
     }
     /*=================================================================
                 HEADER
   ===================================================================*/

     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: #e3a836;
       border-bottom: 2px solid #00384d;
       border-top: 2px solid #00384d;
       z-index: 10
     }

     nav a {
       display: inline-block;
       text-decoration: none;
       color: white;
       font-size: 20px;
       font-family: calibri;
       padding: 15px 25px;
       letter-spacing: 2px;
       margin: 0;
       margin-right: -4px;
       transition-duration: 0.4s;
     }

     nav.nv a#icon {
       display: none;
     }

     nav a:hover {
       background-color: #00384d;
     }

     div.sidebar {
       width: 200px;
       float: left;
       height: 650px;
       background: #00384d;
       padding: 5px;
       overflow-y: scroll;
     }

     h2.sidebar {
       padding: 0 20px;
       margin-left: -4px;
       margin-right: -4px;
       background: #e3a836;
     }

     ul.sidebar {
       list-style-type: none;
       padding: 0 0 0 0;
       margin: 0 0 50px 0;
     }

     ul.sidebar li {
       margin: 5px -4px 5px -4px;
       font-size: 18px;
       padding: 0 5px 0 10px;
       color: white;
     }

     ul.sidebar li:nth-child(odd) {
       background: #004761
     }

     div.sidebarFixed {
       top: 48px;
     }

     div.section {
       width: 65%;
       position: relative;
       left: 300px;
       top: 50px;
       height: 2000px;
       background: #f2f2f2;
     }
     /*=====================================================
                             MEDIA SCREEN
                         ===============*/

     @media only screen and (max-width: 800px) {
       nav.nv {
         width: 100%;
         z-index: 10;
         border-top: 2px solid red;
         border- bottom: 2px solid green;
       }
       nav.nv a.resp {
         display: none;
       }
       nav.nv a#icon {
         display: inline-block;
         width: 100%;
       }
       nav.nv.responsive a {
         display: block;
       }
     }

当导航栏在滚动后变得粘滞时，为什么div div的标题会向左移动？

1 个答案: