滚动后响应式粘性菜单无效

时间：2016-10-02 16:00:25

标签： javascript css html5 sticky responsive

所以我在弄乱我的代码几个小时寻求帮助之后在这里发了一个问题。基本上我想做一个响应的顶级菜单，当你向下滚动到它的水平时也会卡住但是由于某种原因，一切都会起作用但是当窗口被调整为小于显示完整菜单的最小宽度时，掉落激活的向下菜单只有当它仍然在顶部时才有效，而不是一旦你滚过它并使其变得粘稠。我目前正在学习html5和css，但我对javascript非常不熟悉，所以试图采取我发现允许你使用他们的代码（基本上是其他教程网站）的网站的例子但是没有运气，但是终于搞定了。我只想在这里发帖，以防有人感兴趣：

HTML：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="files/style01.css">

    <title>This is my title</title>
  </head>

  <body>
    <header>
      <div class="logo">Logo place holder</div>
      <div class="coverimage">Cover Image place holder</div>

      <!-- Top menu is 44px in height -->    
      <div id="topmenu">
        <ul class="topnav" id="myTopnav">
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Safety</a></li>
          <li><a href="#">Contact</a></li>
          <li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li>
          <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li>
        </ul>
      </div>
    </header>
    <div class="content">
      <a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a>
      Test
    </div>

    <script src="files/js/jquery.min.js"></script>
    <script src="files/js/index.js"></script>

  </body>
</html>

jquery.min.js需要在那里，可以从here.下载

的CSS：

body{
    background-color: rgb(240,240,240);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-color: rgb(0,0,0);
    margin: 0;
}

ul.topnav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(60,60,60);
}
ul.topnav li{float: left;}
ul.topnav li a{
    display: inline-block;
    color: rgb(250,250,250);
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    transition: 0.2s;
    font-size: 14px;
}
ul.topnav li.contactright{
    float: right;
    font-size: 15px;
    color: rgb(200,200,200);
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    transition: 0.2s;
}
ul.topnav li a:hover {background-color: rgb(100,100,100);}

ul.topnav li.icon {display: none;}

@media screen and (max-width:675px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:675px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

/* This is the class that will be added or removed based on the scroll position */
.fixednav{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.coverimage {color:#777; font-style:italic; margin:10px 0;}
#topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;}
.content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}

我链接到的索引js文件：

// script for the sticky menu
var menu = document.querySelector('#topmenu');
var menuposition = menu.offsetTop;
stickMenu(menuposition);
jQuery(window).scroll(function () {
    stickMenu(menuposition);
});
function stickMenu(menupos) {
    if (jQuery(window).scrollTop() >= menupos) {
        jQuery('#topmenu').addClass('fixednav');
    } else {
        jQuery('#topmenu').removeClass('fixednav');
    }
}

// script for the responsive menu
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

如果其他人发现我的主题是因为他们有类似的问题，我希望这会有所帮助。 ： - ）

1 个答案:

答案 0 :(得分：0)

看起来jquery无法正常工作，我在关闭正文之前将jquery再次添加到文档的末尾。

＆＃13;
＆＃13; 
// script for the sticky menu
var menu = document.querySelector('#topmenu');
var menuposition = menu.offsetTop;
stickMenu(menuposition);
jQuery(window).scroll(function () {
    stickMenu(menuposition);
});
function stickMenu(menupos) {
    if (jQuery(window).scrollTop() >= menupos) {
        jQuery('#topmenu').addClass('fixednav');
    } else {
        jQuery('#topmenu').removeClass('fixednav');
    }
}

// script for the responsive menu
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
＆＃13; 
body{
    background-color: rgb(240,240,240);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-color: rgb(0,0,0);
    margin: 0;
}

ul.topnav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(60,60,60);
}
ul.topnav li{float: left;}
ul.topnav li a{
    display: inline-block;
    color: rgb(250,250,250);
    text-align: center;
    padding: 2px 16px;
    text-decoration: none;
    transition: 0.2s;
    font-size: 14px;
}
ul.topnav li.contactright{
    float: right;
    font-size: 15px;
    color: rgb(200,200,200);
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    transition: 0.2s;
}
ul.topnav li a:hover {background-color: rgb(100,100,100);}

ul.topnav li.icon {display: none;}

@media screen and (max-width:675px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:675px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

/* This is the class that will be added or removed based on the scroll position */
.fixednav{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.coverimage {color:#777; font-style:italic; margin:10px 0;}
#topmenu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%; margin-bottom: -44px;}
.content {margin-top:10px; height: 20000px; padding-top: 54px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
＆＃13; 
   


  <body>
    <header>
      <div class="logo">Logo place holder</div>
      <div class="coverimage">Cover Image place holder</div>

      <!-- Top menu is 44px in height -->    
      <div id="topmenu">
        <ul class="topnav" id="myTopnav">
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Safety</a></li>
          <li><a href="#">Contact</a></li>
          <li class="contactright"><a class="contactright" href="#">Email Me: Text@email.com</a></li>
          <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li>
        </ul>
      </div>
    </header>
    <div class="content">
      <a href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">Here</a>
      Test
    </div>

    <script src="files/js/jquery.min.js"></script>
    <script src="files/js/index.js"></script>
    <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
    
    </body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题