Question

我有一个基于免费引导主题的网页代码。当人们滚动时，我试图制作位于徽标棒下方的菜单。似乎“想”工作-直到似乎“被推开”。

我认为这是因为所有div嵌套。我只是不知道该怎么办... 我尝试了在w3schools上找到的两种不同方法，我都会在代码中列出它们-尽管我分别尝试了它们。我还尝试将粘性div类添加到各个地方。我添加的代码就像我敢于做到的那样简单，而没有消除可能的问题...

谢谢您的任何建议！

<head>
     <style> 
          div.sticky {
             position: -webkit-sticky;
             position: sticky;
             top: 0;
          }
      .sticky3 {
         position: fixed;
         top: 0;
         width: 100%;
      }

      .sticky3 + .content {
         padding-top: 102px;
      }
   </style>
</head>
<body id="pageBody">
    <div id="divBoxed" class="container">
        <div class="transparent-bg" >
        </div>
        <div class="divPanel notop nobottom">
            <div class="row-fluid">
                 <div class="span12">
                    <div id="divLogo" class="pull-left"><a href="index.html">t</a><br>  
                    </div>
                    <div id="divMenuRight" class="pull-right" id="myMenu"><!--div5-->
                        <div class="sticky navbar">
                            <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
                            NAVIGATION <span class="icon-chevron-down icon-white"></span>
                            </button>
                            <div class="nav-collapse collapse" >
                                <ul class="nav nav-pills ddmenu">
                                    <li class="active"><a href="index.html">Home</a></li>
                                    <!-- etc-->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!-- this I add only to show what comes next....-->
            <div class="row-fluid">
                <div class="span12">
                    <div id="headerSeparator"></div>
                    <div class="camera_full_width">
                        <div id="camera_wrap">
                            <div data-src="slider-images/1.jpg" </div>
                        </div>
                        <br style="clear:both"/>
                        <div style="margin-bottom:40px"></div>
                    </div>
                    <div id="headerSeparator2"></div>
                </div>
            </div>
        </div>

        <div class="contentArea">
            <div class="divPanel notop page-content">
                <div class="row-fluid">
                <!--Main Content Area here-->
                </div>
             </div>
         </div>
<!--- etc-->

    <script>
        window.onscroll = function() {myFunction()};

        var myMenu = document.getElementById("myMenu");
        var sticky = myMenu.offsetTop;

        function myFunction() {
          if (window.pageYOffset > sticky) {
            myMenu.classList.add("sticky");
          } else {
            myMenu.classList.remove("sticky");
          }
        }
    </script>

粘滞菜单不粘

0 个答案: