Перемещающий .active в навигационном меню, в трех языках

283
07 августа 2017, 11:56

При прокрутке сайта навигационное меню в первом варианте работает только на языке UA, на языках EN RU даже не отображает активный первый элемент, никак не подсвечивает. https://jsfiddle.net/SomebodyUA/xjooe1dj/

1
$(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">&boxv;</span>-->
                    <span id="switcher-en" class="lang-switcher lang-switcher--en">EN</span>
                    <!--<span class="vertical-line">&boxv;</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();
READ ALSO
Vue js + jquery непонятное поведение аякса?

Vue js + jquery непонятное поведение аякса?

такое поведение - search_row То загружается то нет

301
Поиск по каждому элемент списка(ul li)

Поиск по каждому элемент списка(ul li)

ПриветКак найти, есть ли в списке определённый текст? Список такой - ul>li>a

343
Не подключается шрифт

Не подключается шрифт

Не подключается шрифт

312
Вычисляемая колонка (Generated Column) в mysql

Вычисляемая колонка (Generated Column) в mysql

Есть таблица productsИ там есть столбцы qty (количество), buy_price (цена покупки) и total (итог)

611