$(window).scroll(function() {
if ($(this).scrollTop() > 100){
$('.site-header').addClass("nav-down");
}
else{
$('.site-header').removeClass("nav-down");
}
});
<nav class="main-nav">
<ul class="product-menu">
<li>
<a href="#">
<span class="">ОЧИЩЕНИЕ</span>
</a>
</li>
<li>
<a href="#">
<span class="note">для лица</span> <span class="title">CLASSIC</span></a>
</li>
<li>
<a href="#">
<span class="note">для лица</span><span class="title">PREMIUM</span>
</a>
</li>
<li>
<a href="#">
<span class="">ДЛЯ ТЕЛА</span>
</a>
</li>
</ul>
</nav>
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.main-nav ul {
padding: 0;
font-size: 0;
text-align: center;
}
.main-nav li {
display: inline-block;
list-style: none;
color: #fff;
vertical-align:middle;
line-height:30px;
padding:15px 10px;
}
.product-menu li {
background: #1a79bb;
}
.product-menu li a {
display: inline-block;
position: relative;
}
.product-menu li a span {
font-size: 18px;
display: block;
}
.note {
position: absolute;
top:-15px;
text-alighn:center;
right: 0;
left: 0;
}
.title {
position: relative;
top:10px;
}
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">