Slideout js перемещает страницу вверх, как пофиксить?
0
Здравствуйте, решил использовать Slideout Js для выезжающего меню, но при открытии этого самого меню скрипт тпшит страницу вверх. Как это пофиксить?
Ссылка на Slideout - https://slideout.js.org/
Ссылка на Slideout Github - https://github.com/mango/slideout
<!--index.html-->
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Side-menu -->
<div class="side-menu bg-dark flex-column pl-3 pt-2 d-lg-none" id="menu">
<h2>Меню</h2>
<hr>
<ul class="navbar-nav">
<li class="nav-item active"><a href="#" class="nav-link"><i class="fas fa-home"></i> Главная</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-hard-hat"></i> ОТ и ТБ</a></li>
<li class="nav-item"><a href="#" class="nav-link "><i class="fas fa-cubes"></i> Режим сварки</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-cog"></i> Параметры сварки</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-address-book"></i> О нас</a></li>
<li class="nav-item"><a href="#" class="nav-link"><i class="fas fa-address-card"></i> Контакты</a></li>
</ul>
<button type="button" class="btn btn-primary mt-3">Начать</button>
</div>
<!--Main content-->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid container-lg d-flex justify-content-between justify-content-lg-around">
<a class="slideout-button d-block d-lg-none"><i class="fas fa-bars"></i></a>
<a class="navbar-brand text-uppercase">
<h1><span style="color: #3b62f5;">w</span>helper</h1>
</a>
<ul class="navbar-nav d-none d-lg-flex">
<li class="nav-item active"><a href="#" class="nav-link">Главная</a></li>
<li class="nav-item"><a href="#" class="nav-link">ОТ и ТБ</a></li>
<li class="nav-item"><a href="#" class="nav-link">Режим сварки</a></li>
<li class="nav-item"><a href="#" class="nav-link">Параметры сварки</a></li>
<li class="nav-item"><a href="#" class="nav-link">О нас</a></li>
<li class="nav-item"><a href="#" class="nav-link">Контакты</a></li>
</ul>
<button type="button" class="btn btn-primary d-none d-lg-block">Начать</button>
</div>
</nav>
<main id = "panel">
<header class="header mt-5">
<div class="container">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h1 class="font-weight-bolder">Лёгкий расчёт режима сварки</h1>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel molestias sit, porro incidunt quis deserunt architecto et enim, officia, ratione esse. Laudantium, architecto quia? Enim cum nam porro sed officiis.</h2>
</div>
</div>
</header>
</main>
<!--Ссылку на fa удалил-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>// Script.js
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
// Toggle button
document.querySelector('.slideout-button').addEventListener('click', function() {
slideout.toggle();
});
var fixed = document.querySelector('.navbar');
slideout.on('translate', function(translated) {
fixed.style.transform = 'translateX(' + translated + 'px)';
});
slideout.on('beforeopen', function () {
fixed.style.transition = 'transform 300ms ease';
fixed.style.transform = 'translateX(256px)';
});
slideout.on('beforeclose', function () {
fixed.style.transition = 'transform 300ms ease';
fixed.style.transform = 'translateX(0px)';
});
slideout.on('open', function () {
fixed.style.transition = '';
});
slideout.on('close', function () {
fixed.style.transition = '';
});/*Main.css*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
/* SlideOut js */
body, html {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif !important;
}
hr{
color: #fff;
}
.slideout-menu {
position: fixed;
top: 0;
bottom: 0;
width: 256px;
min-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 0;
display: none;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #FFF; /* A background-color is required */
min-height: 100vh;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
.slideout-button{
border: none;
background-color: transparent;
font-size: 2rem;
}
/* Main styles */
.navbar{
backface-visibility: hidden;
}
.navbar-brand h1{
font-size: 2.25rem;
font-weight: 800;
color: #000;
}
.navbar .btn-primary{
border-radius: 30px;
width: 15%;
font-weight: 700;
border: rgba(50, 65, 143, 0.4) solid 2px;
}
#menu .btn-primary{
width: 90%;
}
#menu a{
color: #c2c2c2;
padding-top: 6px;
padding-bottom: 6px;
}
#menu ul li{
padding-top: 3px;
}
.header h1{
font-weight: 600;
}
.side-menu h2{
font-weight: 600;
font-size: 2rem;
color: #fff;
}