У вас сейчас при ресайзе до 450px каждый раз overlay добавляется, их так можно и 100000 наплодить.
fadeIn и fadeOut можно реализовать с помощью transition: opacity 0.2s;
и в js только добавлять и убирать классы вроде .is-active { display: block; opacity: 1; }
Я бы полностью выпилил resize, отказался от fadeIn fadeOut и использования функции css()
$(window).bind('resize', function(){
if ($(window).width() < 450) {
$('.header').removeClass('flex');
$('body').append('<div class="overlay"></div>');
$('.nav').css('z-index','9');
$('.logo, .contacts, .nav').addClass('fadeout');
$('.fadeout').css('display','none');
}
else {
if ($(window).width() > 450) {
$('.header').addClass('flex');
$('.overlay').remove();
$('.nav').css('z-index','11');
$('.logo, .contacts').css('display','block');
$('.nav').css('display','flex');
$('.logo, .contacts, .nav').removeClass('fadeout');
}
}
}).trigger('resize');
$('.btn-nav').on('click', function() {
if ($('.fadeout, .overlay').css("display") == "none") {
$('.fadeout').fadeIn(200);
$('.overlay').fadeIn(200);
$('.btn-nav').css('background','url(img/btn-nav-active.png) top left no-repeat');
}
else {
$('.overlay').fadeOut(200);
$('.fadeout').fadeOut(200);
$('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
}
});
$(('a.nav-link')).on('click touch', function() {
$('.overlay, .fadeout').fadeOut();
$('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
});
$('body').on('click', '.overlay', function(event) {
event.preventDefault();
$('.overlay, .fadeout').fadeOut(200);
$('.btn-nav').css('background','url(img/btn-nav.png) top left no-repeat');
});<div class="container">
<div class="background">
<div class="column sidebar">
<header class="widget header_widget">
<p>Widget</p>
<p>left</p>
</header>
</div>
<div class="wrap-content">
<p>Interviewing</p>
<div class="wrap-column">
Здесь все колонки
</div>
</div>
</div>
</div>Все поп-апы можно вызывать аяксом, что бы они не грузили страницу (куча готовых библиотек).
$(window).resize(function() {
if(document.documentElement.clientWidth < 451) {
$(('a[name=link]')).on('click', function() {
$('.main-nav').fadeOut();
$('.overlay-3').fadeOut();
});
}
else {
if(document.documentElement.clientWidth > 451) {
$('.main-nav').css('display','block');
}
}
});<section 1>
<a name="1></a>
................
</section>
The name attribute is not supported in HTML5. Use the...
$(document).ready(function() {
$(('a[name=modal]')).click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var x = $(this).offset();
$(id).fadeIn(100);
$(id).css('top', window.scrollY + 50 + 'px');
});
})
В общем-то, загуглила этот вопрос, не дожидаясь ответа, и нашла хорошую статью. Да... не задумывалась как-то о том, что все эти методы вписывают все стили в атрибут style у элемента. Обращала внимание, но не задумывалась о последствиях этого, хотя сама бы ни за что не стала в html файле руками прописывать стили подобным образом, особенно со скрытым во вкладках контентом, который, получается, не будет индексироваться поисковиками, раз он всегда скрыт по умолчанию, а это плохо.
В общем, теперь буду использовать классы, как вы предложили, с теми же свойствами display: none, block и т.д. :-)