Bootstrap Scrollspy вызывает проблемы с меню Off-Canavas

ОБНОВЛЕНИЕ: Чтобы устранить некоторую путаницу, я добавил скрипку, которая демонстрирует, как она должна работать, но она просто пропускает scrollspy: https://jsfiddle.net/kmdLg7t0/ Как я могу добавить scrollspy к этой скрипте, чтобы меню выделялось, когда я нахожусь в определенном разделе?

Я создал фиксированное левое меню, которое превращается в меню вне холста в < 992px в ширине браузера для планшетов и мобильных устройств. Когда я выбираю ссылку привязки на ширине браузера 992px, она закрывает меню и переходит в секцию привязки.

Пользовательский код JQuery: Это мой пользовательский код jQuery, который закрывает меню Off-Canvas, когда я нажимаю ссылку привязки:

// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
  $('body').removeClass('bs.offcanvas');
});

ПРОБЛЕМА:

Я решил добавить bootstrap offscrollspy, и он работает так, как предполагается, после ширины браузера больше 992px, но когда я изменяю размер браузера до менее 992px, это мешает пользовательскому JQuery Code закройте меню и перейдите к привязке.

Здесь Fiddle:

Bootstrap ScrollSpy вызывает проблему с Off Canvas Menu и JQuery Code

Мой GUESS. Я предполагаю, что решение этой проблемы - использовать jquery или javascript для предотвращения или удаления data-target = ". navmenu" из когда мой экран меньше < 992px. Или мы можем найти способ активировать scrollspy после 992px.. Я в настоящее время пытаюсь понять это, но мне нужен кто-то, кто прав эксперт в jquery, чтобы решить эту дилемму.

Pre-Реквизит:

  • Bootstrap.min.css
  • Bootstrap.min.js
  • Jasny-bootstrap.css
  • Jasny-bootstrap.js

JS:

$(document).ready(function () {
  toggleOffcanvas($(window).width() <= 992);
});

// simulate modal opening
$('.nav-link').click(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
  }

    $('#navToggle').click();
});

$('.navmenu').on('show.bs.offcanvas', function() {
    if ($(window).width() <= 992) {
        $('.backdrop').fadeIn();
  }
});

$('.navmenu').on('hide.bs.offcanvas', function() {
    if ($(window).width() <= 992) {
        $('.backdrop').fadeOut();
  }
});

// close modal on resize
$(window).resize(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
    $('body').removeClass('bs.offcanvas');
  }

  toggleOffcanvas($(window).width() <= 992);
});

// switch active navigation link onclick
$('.nav a').on('click', function() {
  $('.nav').find('.active').removeClass('active');
  $(this).parent().addClass('active');
});

// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
  $('body').removeClass('bs.offcanvas');
});

function toggleOffcanvas(condition) {
    if (!! condition) {
    $('.nav-link').attr('data-toggle', 'offcanvas');
  } else {
    $('.nav-link').removeAttr('data-toggle');
  }
}

HTML:

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">


<div class="backdrop"></div>

<div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
<a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">&times;</a>
 <a id="navToggle" class=""><span></span></a>
  <h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
  <ul class="nav navmenu-nav">
    <li class="active"><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#january">Enero</a></li>
    <li><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#february">Msrs</a></li>
    <li><a class="nav-link" href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-reveal/'; return false;">Jupiter</a></li>
    <li><a class="nav-link" href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navbar-offcanvas/'; return false;">Off canvas navbar</a></li>
  </ul>

</div>

<div class="navbar navbar-default navbar-fixed-top navbar-preheader">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">navbar brand</a>



</div>

<div class="container">
  <div class="page-header">
    <h1>Navmenu Template</h1>
  </div>
  <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
  <p>Also take a look at the examples for a navmenu with <a href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-push'; return false;">push effect</a> and <a href="#" onclick="location.href='http://www.jasny.net/bootstrap/examples/navmenu-reveal'; return false;">reveal effect</a>.</p>
  <p class="space"></p>
  <p id="january">January</p>
  <p id="february">February</p>
</div><!-- /.container -->
</body>

CSS

html, body {
  height: 100%;
}
body {
  padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}

.backdrop {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1040;
  display: none;
}

.navbar-fixed-top {

  background:#fff!important;
}


.navbar {
  display: block;
  text-align: center;
}
.navbar-brand {
  display: inline-block;
  float: none; 
}
.navbar-toggle {
  position: absolute;
  float: left; 
  margin-left: 15px;
}

.container {
  max-width: 100%;
}

@media (min-width: 1px) {
  .navbar-toggle {
    display: block !important; background:none!important;  border:none !important; color:#f90 !important;
  }
}

@media (min-width: 992px) {
  body {
    padding: 30px 0 0 300px;
  }
  .navmenu {
    padding-top: 0; 
  }

.navbar-toggle {display:none!important;}
.close {display:none}


.navmenu-fixed-left {
  z-index:0;
  top: 48px;
  bottom: 0; background:#fff!important;
}

}

    .navbar-default .navbar-toggle .icon-bar{
       background-color:#333;
    }


.close {margin-right:10px; margin-top:10px;}

@media (max-width:991px) {



.navmenu-fixed-left {
  z-index:1050;
  top: 0;
  bottom: 0; background:#fff!important;
}


}

    .backdrop {display:none}

    #january, #february {
      text-transform: uppercase;
      background-color: red;
      text-align: center;
      line-height: 90vh;
      font-size: 5em;
      height: 90vh;
      color: white;
    }

    #february {
      background-color: green;
    }

ОТВЕТЫ

Ответ 1

Проблема с кодом заключается в том, что data-target=".navmenu" в пунктах меню разбивает плагин scrollspy. В принципе, scrollspy устанавливает соединение между элементом меню и элементом на странице с помощью свойства data-target или href. Вот его часть исходный код:

return `${selector}[data-target="${target}"],` +
       `${selector}[href="${target}"]`

Из-за этого вы не можете использовать data-target в ссылках меню, чтобы закрыть меню. Вы можете использовать javascript, чтобы закрыть меню.

Здесь обновлена ​​ссылка HTML:

<li class="active"><a class="nav-link" href="#january">Enero</a></li>
<li><a class="nav-link" href="#february">Msrs</a></li>

И все необходимые вам javascript:

$(document).ready(function () {
  // Add the backdrop when menu is shown
  $('.navmenu').on('show.bs.offcanvas', function() {
    $('.backdrop').fadeIn();
  });

  // Remove the backdrop when menu is hidden
  $('.navmenu').on('hide.bs.offcanvas', function() {
    $('.backdrop').fadeOut();
  });

  // Hide the menu on menu item click
  $('.nav-link').click(function() {
    if ($(window).width() <= 992) {
      $('.navmenu').offcanvas('toggle');
    }
  });

  // Remove the backdrop if window is resized over the breakpoint
  $(window).resize(function () {
    if ($(window).width() > 992) {
      $('.backdrop').fadeOut();
    }
  });
});

Полный рабочий пример:

https://jsfiddle.net/kmdLg7t0/5/

Наконец, вам нужно удалить все href="#" из элементов ссылки, где они не нужны. Например, кнопка закрытия меню вернет вас к #, даже если вы перешли на #january.

Итак, все, что я сделал:

  • удалены атрибуты data- из ссылок
  • меню закрытия с javascript по ссылке нажмите
  • удалить ненужные href=# из ссылок

Все остальное обрабатывается самими плагинами.

Ответ 2

Связывая шпионский свиток с классом, вы можете затем переключить указанный класс по мере необходимости. Кроме того, не забудьте запустить функцию один раз на загрузке страницы, чтобы установить начальное состояние.

$('body').scrollspy({ target: '.scroll-spy' });

toggleScrollSpy($(window).width() <= 992);

// close modal on resize
$(window).resize(function() {
  if ($(window).width() > 992) {
    $('.backdrop').hide(0, false);
    $('body').removeClass('bs.offcanvas');
  }

  toggleScrollSpy($(window).width() <= 992);
});

function toggleScrollSpy(condition) {
  if (!!condition) {
    $('#myScrollspy').addClass('scroll-spy');
  } else {
    $('#myScrollspy').removeClass('scroll-spy');
  }
}

Ответ 3

Я бы просто сказал, когда вы анимируете или изменяете размер веб-страницы, убедитесь, что ваши координаты сверху, слева и высота, ширина тщательно рассчитаны. Потому что, если у них есть какие-либо изменения во время изменения размера, они будут показывать нежелательные позиции. Поэтому его всегда хорошая идея - изучить координаты, а затем динамически изменить их по мере необходимости.