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/popper.js@1.16.0/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;
}