Блог

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

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

#javascript #css #html #sticky #responsive

#javascript #css #HTML #липкий #отзывчивый

Вопрос:

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

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. Сократите ненужные абзацы и код, чтобы упростить его. Где вы получите несколько быстрых ответов

2. Прасад Привет, спасибо за ответ, я бы хотел, я изучаю все, что мог, о css и html5, но на самом деле мало что знаю о js, поэтому я действительно понятия не имею, что требуется, а что нет. Я действительно надеялся, что кто-нибудь здесь, кто мог бы мне помочь, мог бы также помочь мне избавиться от того, что мне не нужно.

3. Кроме того, я пытался найти в Интернете, как закодировать другой метод, который не требует клонирования. Единственная проблема — это перескакивание, когда прокрутка достигает элемента, который я хочу вставить, поэтому остальная часть страницы подпрыгивает, но я нашел простое решение для этого, которое заключается в добавлении отступов в основное содержимое и отрицательного поля той же высоты для залипающего элемента. Но по какой-то причине я слежу за js с этого сайта, который показывает, что он работает, но я не могу заставить его работать… Кто-нибудь может предоставить мне то, что мне нужно?

4. Woot! Я провел еще несколько исследований и нашел способ сделать это! Я отредактирую свой пост, чтобы показать его, если кому-то интересно. 🙂

Ответ №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>