Отзывчивое липкое меню не работает после прокрутки

поэтому я опубликовал вопрос здесь после того, как возился с моим кодом в течение нескольких часов, прося о помощи. В основном, я хотел сделать отзывчивое верхнее меню, которое также застряло, когда вы прокрутили вниз до его уровня, но по какой-то причине все будет работать, но когда окно было изменено, чтобы быть меньше, чем минимальная ширина, чтобы показать полное меню, выпадающее меню, которое активируется, то работает только тогда, когда он был еще на вершине, а не когда вы прокрутили мимо него и сделали его липким. В настоящее время я изучаю 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.минута.js должен быть там и может быть загружен отсюда.

стиль 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;}

И файл index 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 ответ

  1. Похоже, jquery не работал, я снова добавил jquery в конец документа перед заключительным телом.

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