Помогите с меню - добавить css если меню открыто

[igorfelix89]

Добрый день, есть меню бургер от boostrap 4

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

Если оно открыто, хочу css добавить
в класс

.bg-dark {
background-color: #00011b !important;

}

что б стало так

.bg-dark {
background-color: #00011b !important; 

height: 100%;height: 100%;
overflow-y: scroll;

}

но только когда бургер меню открыто, если меню закрываем, то удаляло обратно, иначе верстка ползет.


Что нужно прописать в js..

вот как определить что открыли меню..

$(document).ready(function () {
        $("navbar-toggler").click(function (e) {
          ......
        });
    });

и правильно ли я указываю $("navbar-toggler").click(function (e) {

[рони]

igorfelix89,

$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () { alert("hidden");
  // do something…
})
$('#navbarCollapse').on('show.bs.collapse', function () { alert("show");
  // do something…
})

});

[igorfelix89]

Спасибо за ответ. вот что мне удалось сделать

$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () {
  // do something…
  var sideBar = document.querySelector('#menus');
  sideBar.classList.remove('scrolly');
  
})
$('#navbarCollapse').on('show.bs.collapse', function () {
  // do something…
var sideBar = document.querySelector('#menus');
sideBar.classList.add('scrolly');
})

});

html меню бургера:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="menus">

после bg-dark, дописываем .scrolly

css:

.scrolly {height: 100%; overflow-y: scroll;}

Работает как надо! Но, видно мерцание меню, как будто бы есть доля секунды задержки.. глаза замечают что нет плавности. может быть есть еще какой-то способ ?

[igorfelix89]

а еще такой способ нашел.

$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () {
  // do something…
 $('.bg-dark').removeClass('active');
 
  
})
$('#navbarCollapse').on('show.bs.collapse', function () {
  // do something…
$('.bg-dark').addClass('active');

})

});

css: .bg-dark.active {height: 100%; overflow-y: scroll;}

html : <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="menus">

[рони]

igorfelix89,
лучше сразу делать минимальный макет

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[igorfelix89]

Спасибо, поигрался со стилями, убрал дрыг меню, немного деревенский способ, но получилось по другому и тоже вполне неплохой вариант!!