// scroll
var scrollWindow = function() {
$(window).scroll(function(){
var $w = $(this),
st = $w.scrollTop(),
navbar = $('.ftco_navbar'),
sd = $('.js-scroll-wrap');
if (st > 150) {
if ( !navbar.hasClass('scrolled') ) {
navbar.addClass('scrolled');
}
}
if (st < 150) {
if ( navbar.hasClass('scrolled') ) {
navbar.removeClass('scrolled sleep');
}
}
if ( st > 350 ) {
if ( !navbar.hasClass('awake') ) {
navbar.addClass('awake');
}
if(sd.length > 0) {
sd.addClass('sleep');
}
}
if ( st < 350 ) {
if ( navbar.hasClass('awake') ) {
navbar.removeClass('awake');
navbar.addClass('sleep');
}
if(sd.length > 0) {
sd.removeClass('sleep');
}
}
});
};
scrollWindow();
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var counter = function() {
$('#section-counter').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('.number').each(function(){
var $this = $(this),
num = $this.data('number');
console.log(num);
$this.animateNumber(
{
number: num,
numberStep: comma_separator_number_step
}, 7000
);
});
}
} , { offset: '95%' } );
}
counter();
var contentWayPoint = function() {
var i = 0;
$('.ftco-animate').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .ftco-animate.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn ftco-animated');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft ftco-animated');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight ftco-animated');
} else {
el.addClass('fadeInUp ftco-animated');
}
el.removeClass('item-animate');
}, k * 50, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '95%' } );
};
contentWayPoint();
.ftco-navbar-light.scrolled {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: fixed;
top: 0;
left: 50%;
width: 100%;
padding: 0 20px;
transform: translateX(-60%);
z-index: 3;
background: #fff !important;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu </button>
<a id="#main"></a>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a href="#main" class="nav-link">ГЛАВНАЯ</a></li>
<li class="nav-item"><a href="#barbers" class="nav-link">МАСТЕРА</a></li>
<li class="nav-item"><a href="#prices1" class="nav-link">ЦЕНЫ</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<div class="hero-wrap js-fullheight" style="background-image: url('images/bg_gr.jpg');" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<h1 class="mb-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">text</h1>
<p data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><a href="#" class="btn btn-primary px-4 py-3 ms_booking">Записаться</a></p>
</div>
</div>
</div>
</div>
.ftco-navbar-light.scrolled {
position: fixed;
right: 0;
left: 50%;
transform: translateX(-50%);
top: 0;
z-index: 3;
margin-top: -130px;
background: #fff !important;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a id="#main"></a>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#main" class="nav-link">ГЛАВНАЯ</a></li>
<li class="nav-item"><a href="#barbers" class="nav-link">МАСТЕРА</a></li>
<li class="nav-item"><a href="#prices1" class="nav-link">ЦЕНЫ</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</nav>