Добрый вечер. У меня возникла проблема с внесением исправлений в html при помощи .js. Здравствуйте, я хочу, что бы при ресайзе окна браузера . Версия сайта, что я делаю превращалась в подобие мобильной. Для этого мне необходим отключить fullpage.js и убрать и докинуть пару классов . Я думал, что все будет гладко, когда мне посоветовали window.onresize(). Но не тут то было.
1) Он работает когда захочет . Раз из 3-5, при пересечении указаной границы (761) страница перегружается.
Чаще срабатывает при увеличении экрана.
2) сам вариант $(window).onresize = myFunction(); не работает.
Выходит нормально только при обьявлении функции в теге
3) Возможно все это можно сделать более нормальным способом? Каким?
function myFunction() {
if($(window).width() == 761 ){
location.reload(true);
}
if($(window).width() <= 760 ){
$('#menu-header-button').click(function(){
$('#navigation').toggleClass('navbar-v');
$('#logo-mobile').toggleClass('visible');
$('#menu-header-button').addClass('disabled');
setTimeout(function(){
$('#menu-header-button').removeClass('disabled');
}, 500);
});
} else if($(window).width() > 760 ){
$('#fullpage').fullpage({
menu: '#menu',
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
css3: true,
afterLoad: function(anchorLink, index){
if( anchorLink == 'firstPage'){
$('#navigation').removeClass('navbar-v');
}
},
onLeave: function(index, nextIndex, direction){
setTimeout(function(){
$('#navigation').addClass('navbar-v');
}, 500);
}
});
}
}
<body onresize="myFunction()">
<p id="demo"></p>
<nav class="navbar navbar-default navbar-fixed-top" id="navigation">
<div class="container-fluid">
<div class="navbar-header nav-menu-header">
<button class="navbar-toggle nav-mobile-btn " data-toggle="collapse" data-target="#navlist" id="menu-header-button">
<img src="img/menu.png">
</button>
<div class="menu-header-logo" id="logo-mobile">
<img src="img/logo-mobile.png">
</div>
<ul class="nav navbar-nav languages">
<li><a href="#" class="sel">РУ</a></li>
<li><a href="#" class="n-sel">EN</a></li>
</ul>
</div>
<div class="collapse navbar-collapse nav-menu-links" id="navlist">
<ul class="nav navbar-nav navbar-right navbar-list menu" id="menu">
<li id="first" data-menuanchor="firstPage" class="active"><a href="#">Главная</a></li>
<li id="second" data-menuanchor="secondPage"><a href="#">О нас</a></li>
<li id="3rd" data-menuanchor="3rdPage"><a href="#">Услуги</a></li>
<li id="4th" data-menuanchor="4thPage"><a href="#">Контакты</a></li>
<li ><a href="#">Блог</a></li>
</ul>
</div>
</div>
</nav>
Простой