При прокрутке сайта навигационное меню в первом варианте работает только на языке UA, на языках EN RU даже не отображает активный первый элемент, никак не подсвечивает.
https://jsfiddle.net/SomebodyUA/xjooe1dj/
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.col-xs-12').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.top-menu li.active').removeClass('active');
$('.top-menu li').eq(i).addClass('active');
}
});
} else {
$('.top-menu li.active').removeClass('active');
$('.top-menu li:first').addClass('active');
}
}).scroll();
Есть другой вариант js кода, работает на всех языках ( тут - https://jsfiddle.net/SomebodyUA/6qw04ttn/), но и тут проблема, последний блок с "написать отзыв" не достает дабы был подсвечен .active, т.к. у него слишком малое наполнение, и он маленькой высоты, не знаю где поменять свойства во 2-м коде дабы добавить отступ от верха экрана, чтобы .active менялся со средины экрана на услугах.
Заранее благодарю за помощь.
2//>>>start - active menu after scroll<<<
// Cache selectors
var lastId,
topMenu = $(".top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 10);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});
//>>>end - active menu after scroll<<<
HTML&php:
<header>
<div class="hidden-xs hidden-sm hidden-md col-lg-3">
<div class="nav-menu anim-main-sec">
<!--multilanguage!-->
<div class="multilanguage">
<span id="switcher-ua" class="lang-switcher lang-switcher--ua">UA</span>
<!--<span class="vertical-line">│</span>-->
<span id="switcher-en" class="lang-switcher lang-switcher--en">EN</span>
<!--<span class="vertical-line">│</span>-->
<span id="switcher-ru" class="lang-switcher lang-switcher--ru">RU</span>
</div>
<!--multilanguage!-->
<div class="logo">
<a href="#">
<img src="img/main-logo.png" alt="logo">
</a>
</div>
<div class="ua" lang="ua">
<span class="main-nav-menu">Послуги в сфері інтелектуальної <br> власності</span>
<ul class="top-menu">
<li class="active"><a href="#aboutus">Про нас</a></li>
<li><a href="#servsect">Послуги</a></li>
<li><a href="#writeus">Поставити запитання</a></li>
</ul>
<div class="footer-hidden-mnu">
<a href="https://www.facebook.com/MILIEU-1804386106549722/"><i class="fa fa-facebook fb" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin ln" aria-hidden="true"></i></a>
<p class="adress-margin"><span>Адреса : </span>вул. Івана-Франка 40Б,<br> офіс 201, Київ 01030</p>
<p><span>Тел. : </span>+38 ( 044 ) 338 - 68 - 03</p>
<p><span>Моб. : </span>+38 ( 098 ) 820 - 45 - 00</p>
<p><span>Пошта : </span>info@milieu.company</p>
</div>
</div>
<div class="en" lang="en">
<span class="main-nav-menu">Services in the field of intellectual <br>property</span>
<ul class="top-menu">
<li class="active"><a href="#aboutus">About Us</a></li>
<li><a href="#servsect">Services</a></li>
<li><a href="#writeus">Ask Question</a></li>
</ul>
<div class="footer-hidden-mnu">
<a href="https://www.facebook.com/MILIEU-1804386106549722/"><i class="fa fa-facebook fb" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin ln" aria-hidden="true"></i></a>
<p class="adress-margin"><span>Adress : </span>Ivana-Franka st. 40B,<br> office 201, Kiyv 01030</p>
<p><span>Тел. : </span>+38 ( 044 ) 338 - 68 - 03</p>
<p><span>Моб. : </span>+38 ( 098 ) 820 - 45 - 00</p>
<p><span>E-mail : </span>info@milieu.company</p>
</div>
</div>
<div class="ru" lang="ru">
<span class="main-nav-menu">Услуги в сфере интелектуальной <br> собственности</span>
<ul class="top-menu">
<li class="active"><a href="#aboutus">О нас</a></li>
<li><a href="#servsect">Услуги</a></li>
<li><a href="#writeus">Задать вопрос</a></li>
</ul>
<div class="footer-hidden-mnu">
<a href="https://www.facebook.com/MILIEU-1804386106549722/"><i class="fa fa-facebook fb" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com"><i class="fa fa-linkedin ln" aria-hidden="true"></i></a>
<p class="adress-margin"><span>Адрес : </span>ул. Ивана-Франка 40Б,<br> офис 201, Киев 01030</p>
<p><span>Тел. : </span>+38 ( 044 ) 338 - 68 - 03</p>
<p><span>Моб. : </span>+38 ( 098 ) 820 - 45 - 00</p>
<p><span>Почта : </span>info@milieu.company</p>
</div>
</div>
</div>
</div>
<div id="main" class="main-section">
<div id="aboutus" class="first-image fullscreen background parallax" data-img-width="3840" data-img-height="2160" data-diff="300"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
<div class="aboutus-section anim-main-sec">
<div class="ua" lang="ua">
<h1>Про нас</h1>
<p>Вітаємо Вас на сайті компанії Міл’ю!
<br><br>
Якщо ви завітали до Нас, то запитання з інтелектуальної власності, що наявні у Вашому житті, потребують нагального вирішення відповідними спеціалістами.
<br><br>
Наша Компанія надає комплекс послуг в сфері інтелектуальної власності та супутніх сфера як на території України, так і за її межами.
<br><br>
Керуючись сучасною практикою застосування підходів і методів охорони і захисту об'єктів інтелектуальної власності, що гармонійно поєднуються з особливостями індивідуальності клієнта, нашими спеціалістами поставлені завдання вирішується на високому професійному рівні.
<br><br>
Наші головні переваги - сучасний грамотний правовий підхід до захисту об'єктів інтелектуальної власності, комфортна співпраця і повна конфіденційність.
<br><br>
Для нас кожен клієнт - член нашої дружньої команди!
</p>
</div>
<div class="en" lang="en">
<h1>About us</h1>
<p>Welcome on Milieu Company's Website
<br><br>
As we all know, but he is a good Front-end developer)
<br><br>
Наша Компанія надає комплекс послуг в сфері інтелектуальної власності та супутніх сфера як на території України, так і за її межами.
<br><br>
Керуючись сучасною практикою застосування підходів і методів охорони і захисту об'єктів інтелектуальної власності, що гармонійно поєднуються з особливостями індивідуальності клієнта, нашими спеціалістами поставлені завдання вирішується на високому професійному рівні.
<br><br>
Наші головні переваги - сучасний грамотний правовий підхід до захисту об'єктів інтелектуальної власності, комфортна співпраця і повна конфіденційність.
<br><br>
Для нас кожен клієнт - член нашої дружньої команди!
</p>
</div>
<div class="ru" lang="ru">
<h1>О нас</h1>
<p>Рады приветствовать вас на сайте Милью!
<br><br>
Если у вас возникли вопросы касающиеся сферы интелектуальной собственности на територии Украины либо же за её пределами, наша команда будет рада помочь Вам!
<br><br>
Наша Компанія надає комплекс послуг в сфері інтелектуальної власності та супутніх сфера як на території України, так і за її межами.
<br><br>
Керуючись сучасною практикою застосування підходів і методів охорони і захисту об'єктів інтелектуальної власності, що гармонійно поєднуються з особливостями індивідуальності клієнта, нашими спеціалістами поставлені завдання вирішується на високому професійному рівні.
<br><br>
Наші головні переваги - сучасний грамотний правовий підхід до захисту об'єктів інтелектуальної власності, комфортна співпраця і повна конфіденційність.
<br><br>
Для нас кожен клієнт - член нашої дружньої команди!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
header{
.first-image{
background-image: url("../img/first-image-fullhd.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 35vh;
display: none;
position: relative;
animation-name: first-image;
animation-duration: 3s;
//background-attachment: fixed;
}
//fixed-line
.fixed-line{
margin: 0 0;
display: inline-block;
background-color: $verydarkpurple;
position: fixed;
height: 52px;
z-index: 999;
top: 0;
right: 0;
left: 0;
list-style: none;
.fixed-ln-left{
float: left;
width: 33.33%;
margin-left: 5px;
a{
img{
height: 100%;
width: 150px;
transition: all .55s ease;
}
img:hover{
filter: drop-shadow(0px 0px 7px white) drop-shadow(0px 0px 0 white);
}
}
}
.center-multilanguage{
float: left;
width: 33.33%;
margin: 0 15px 0;
text-align: center;
.multilanguage-mob{
margin: 15px auto 10px;
span{
margin: 0 5px;
}
}
}
.fixed-ln-right{
float: left;
width: 20%;
}
}
//fixed-line
//toggle!//toggle!//toggle!//toggle!
.toggle-mnu {
z-index: 999;
position: fixed;
display: block;
width: 28px;
height: 28px;
margin-top: 15px;
right: 10px;
margin-right: 15px;
span:after,
span:before {
content: "";
position: absolute;
left: 0;
top: 9px;
}
span:after {
top: 18px;
}
span {
position: relative;
display: block;
}
span,
span:after,
span:before {
width: 100%;
height: 2px;
background-color: #fff;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
&.on span {
background-color: transparent;
}
&.on span:before {
transform: rotate(45deg) translate(-1px, 0px);
}
&.on span:after {
transform: rotate(-45deg) translate(6px, -7px);
}
}
//toggle!//toggle!//toggle!//toggle!
//SECOND MENU HIDDEN
.hidden-mnu {
z-index: 999;
display: none;
position: fixed;
text-align: center;
//background-color: #ececff;
background-color: $verydarkpurple;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: scroll;
.logo{
a{
img{
max-height: 90px;
z-index: 0;
transition: all .55s ease;
}
img:hover{
filter: drop-shadow(0px 0px 7px white) drop-shadow(0px 0px 0 white);
}
}
}
span{
font-size: 15px;
color: #fff;
}
ul{
margin: 25px 0 50px;
li{
list-style: none;
border-bottom: 1px solid #3f3969/*$purple*/;
a{
height: 50px;
display: block;
padding: 15px;
color: #fff;
}
&:hover{
transition: all .55s ease;
background-color: #fff;
color: $darkpurple;
}
}
li:hover{
a{
color: $darkpurple;
transition: all .55s ease;
}
}
li:last-child{
border-bottom: none;
}
}
a{
i{
margin-bottom: 25px;
margin-left: 5px;
font-size: 27px;
transition: all .25s ease;
}
//i:hover{
// color: #fff;
//}
.fb{
//color: #3b5998;
color: #fff;
font-size: 21px;
&:before{
background-color: #3B5A9D;
padding: 5px 11px;
border-radius: 5px;
}
&:hover{
color: #3B5A9D;
&:before{
background-color: #fff;
}
}
}
.ln{
//color: #007bb5;
color: #fff;
font-size: 21px;
&:before{
background-color: #0077B5;
padding: 5px 8px;
border-radius: 5px;
}
&:hover{
color: #0077B5;
&:before{
background-color: #fff;
}
}
}
}
p{
font-size: 15px;
//color: $purple;
color: #fff;
}
.adress-margin{
margin-bottom: 7px;
}
.footer-hidden-mnu{
padding-bottom: 75px;
}
}
//SECOND MENU HIDDEN^^^
.nav-menu{
z-index: 999;
text-align: center;
position: fixed;
top: 0;
right: 0;
background-color: #0a0935;
margin: 0 auto;
height: 100vh;
display: none;
-webkit-animation-name: nav-menu;
-moz-animation-name: nav-menu;
-o-animation-name: nav-menu;
animation-name: nav-menu;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
//background-color: #ececff;
//padding: 0 25px;
//overflow: scroll;
.multilanguage{
margin: 20px auto 10px;
span{
font-size: 15px;
margin: 0 5px;
}
}
.logo{
//margin-top: 45px;
margin: 15px 20px 15px;
a{
img{
max-height: 90px;
z-index: 0;
transition: all .55s ease;
}
img:hover{
filter: drop-shadow(0px 0px 7px #fff) drop-shadow(0px 0px 0 #fff);
}
}
}
span{
font-size: 15px;
color: #fff;
}
.main-nav-menu{
font-family: "OpenSans-Regular", sans-serif;
line-height: 19px;
font-weight: normal;
font-style: normal;
}
p{
font-size: 15px;
color: $purple;
}
.adress-margin{
margin-bottom: 10px;
}
p:last-child{
margin-bottom: 15px;
}
ul{
margin: 65px 0 180px;
.active{
background-color: #fff;
a{
color: $purple;
}
&:after{
border-bottom: none;
}
}
li{
left: 0;
right: 0;
list-style: none;
//border-bottom: 1px solid #3f3969;
a{
height: 50px;
display: block;
padding: 15px;
color: #fff;
}
&:hover{
transition: all .55s ease;
background-color: #fff;
}
&:after{
content: "";
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #3f3969;
display: block;
}
}
li:hover{
a{
color: $darkpurple;
transition: all .55s ease;
}
}
li:hover:after{
border-bottom: none;
}
li:last-child:after{
border-bottom: none;
}
}
a{
color: $purple;
i{
margin-bottom: 25px;
margin-left: 5px;
font-size: 27px;
transition: all .25s ease;
}
//i:hover{
// color: #fff;
//}
.fb{
//color: #3b5998;
color: #fff;
font-size: 21px;
&:before{
background-color: #3B5A9D;
padding: 5px 11px;
border-radius: 5px;
}
&:hover{
color: #3B5A9D;
&:before{
background-color: #fff;
}
}
}
.ln{
//color: #007bb5;
color: #fff;
font-size: 21px;
&:before{
background-color: #0077B5;
padding: 5px 8px;
border-radius: 5px;
}
&:hover{
color: #0077B5;
&:before{
background-color: #fff;
}
}
}
}
p{
color: #fff;
}
.nav-p{
color: $purple;
}
}
.main-section{
.aboutus-section{
padding: 1px 0;
display: none;
p{
text-align: justify;
}
}
.aboutus-section:after,
.services-section:after{
content: "";
margin: 35px auto 0px;
//opacity: 0.7;
overflow: hidden;
border: 1px solid #e0e0e0;
border-radius: 155px;
display: block;
}
.services-section{
padding: 1px 0;
position: relative;
p{
text-align: justify;
}
ul{
text-align: justify;
list-style-type: disc;
margin-left: 1.25em;
}
.wrapper-left-icons{
display: inline-block;
margin: 15px 30px 15px 0;
max-width: 10%;
float: left;
i{
font-size: 50px;
max-width: 43px;
color: $purple;
}
//.fa-cogs{
// transform: scale(0.9,0.9);
// margin-left: -5px;
//}
//.fa-balance-scale{
// transform: scale(0.8,0.9);
// margin-left: -5px;
//}
}
.service {
position: relative;
display: inline-block;
max-width: 85%;
margin: 10px auto;
border-radius: 15px;
transition: all .3s ease;
cursor: pointer;
h2{
float: left;
margin: 0 15px 0 0;
}
.fa-angle-down{
position: absolute;
top: 0;
right: 5px;
margin: 0 auto;
font-size: 25px;
color: $purple;
}
.fa-angle-up{
position: absolute;
top: 0;
right: 5px;
margin: 0 auto;
font-size: 25px;
color: $purple;
}
p{
margin-top: 10px;
}
}
.service-text {
display: none;
clear: both;
ul{
margin-left: 20px;
}
}
}
//callback//callback//callback
.write-us{
padding: 1px 0;
margin-bottom: 70px;
.pop_form {
padding: 0 0 5px;
transition: all .5s ease;
//input{
// box-shadow: inset 0 1px 6px;
//}
.left-form{
float: left;
max-width: 300px;
width: 35%;
}
.right-form{
float: right;
width: 61%;
}
.bottom-form{
clear: both;
textarea{
margin: 0;
}
}
.button, .reset {
clear: both;
text-align: center;
margin: 0 auto 0;
max-width: 220px;
background-color: $purple;
padding: 7px 23px;
color: #fff;
transition: all .55s ease;
border: none;
border-radius: 5px;
margin-right: 25px;
}
.reset{
background-color: #A5A5A5;
&:hover{
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
}
}
.button:hover{
background-color: $purple;
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.75);
}
textarea[type="text"]{
max-height: 155px;
width: 100%;
font-size: 16px;
padding: 7px 15px;
border: 1px solid $light-grey;
border-radius: 5px;
resize: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color: #a5a5a5;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
border: 1px solid $light-grey;
margin-bottom: 25px;
height: 35px;
width: 100%;
min-width: 250px;
padding: 0 15px;
border-radius: 5px;
outline: none;
font-size: 14px;
}
textarea[type="text"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
border: 2px solid $light-grey;
}
textarea:focus:required:invalid,
input:focus:required:invalid {
border: 1px solid #ff0000;
}
textarea:focus:required:valid,
input:focus:required:valid {
border: 1px solid #2dab45;
}
}
}
//callback//callback//callback
}
//phone//phone//phone
.phone{
position: fixed;
bottom: 5%;
left: 29%;
width: 50%;
display: none;
-webkit-animation-name: phone;
-moz-animation-name: phone;
-o-animation-name: phone;
animation-name: phone;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
a{
.img-circle{
.img-circleblock{
i{
border: 1px solid $purple;
border-radius: 50px;
padding: 14px;
width: 50px;
height: 50px;
font-size: 25px;
background-color: $purple;
color: #fff;
margin: 10px;
}
}
}
}
}
}
<?php
// Читаем куку языка
$lang = @$_COOKIE['lang'];
if ($lang = 'ru') {
// Если куки нет, ставим дефолтную
// Ещё лучше - определять язык пользователя автоматически
$lang = 'ru';
} else if ($lang = 'en') {
$lang = 'en'
} else {
$lang = 'ua'
}
$titleUA = 'UA';
$titleEN = 'EN';
$titleRU = 'RU';
?>
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('.col-xs-12').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.top-menu li.active').removeClass('active');
$('.top-menu li').eq(i).addClass('active');
}
});
} else {
$('.top-menu li.active').removeClass('active');
$('.top-menu li:first').addClass('active');
}
}).scroll();
Виртуальный выделенный сервер (VDS) становится отличным выбором
ПриветКак найти, есть ли в списке определённый текст? Список такой - ul>li>a
Есть таблица productsИ там есть столбцы qty (количество), buy_price (цена покупки) и total (итог)