JQERY прилипающее меню и прокрутка к якорю

270
28 сентября 2017, 12:22

https://jsfiddle.net/vi161/7gc4pghc/

помогите, пожалста, есть 2 меню, при прокрутке вниз прилипает к верху зеленое, а при прокрутке наверх появляется жёлтое меню которое тоже прилипает, а при переходе к якорям по ссылкам нужно чтоб в обоих случаях прилипало только зеленое меню, а жёлтое не прилипало. В этом коде с помощью флагов при переходе по ссылкам жёлтое меню перестает прилипать, НО!! когда нужно пролистать вручную, то оно тоже не появляется.

   <div class="header-nav">
sdf asdf fdg hj
</div>
<div class="products-nav">
<a href="#a1">a1</a>
<a href="#a2">a2</a>
<a href="#a3">a3</a>
</div>
<div class="content">
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
...
<p >sdfsadgfsdg</p>
<p id="a1" >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
...
<p id="a2">sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
...
<p >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
<p id="a3" >sdfsadgfsdg</p>
<p >sdfsadgfsdg</p>
...
</div>

css

.header-nav{
  width: 100%;
  height: 50px;
  background: yellow;
}
.products-nav{
  width: 100%;
  height: 30px;
  background: lightgreen;
}
.header-wrap-fixed {
  position: fixed;
  top:0;
  z-index: 1000;
}
.nav-fixed {
  position:fixed;
  top:0px;
  width: 100%;
//  transition: top 1s;
  z-index: 1000;
}
.header-wrap-fixed__off {
  position: unset;
}

js

var golink = function(){
    $('a[href^="#"]').click(function(){
        var el = $(this).attr('href');
        $('body').animate({scrollTop: $(el).offset().top}, 500);
        return false;
    });
};
var navmenu = function(){
var iScrollPos = 0;
var hproductsnav= $(".products-nav").outerHeight();
var hheadernav= $(".header-nav").outerHeight();
$(window).scroll(function () {
        var iCurScrollPos = $(this).scrollTop();
          if($(this).scrollTop() >= 55) {
            $('.products-nav').addClass('nav-fixed'); //add2
            $('.products-nav').css("top","0")
        }
        else if ($(this).scrollTop() < 95){
            $('.products-nav').removeClass('nav-fixed');//rem2
            $('.header-nav').removeClass('header-wrap-fixed');//add1
        }
                    if ((iCurScrollPos < iScrollPos) &&  
     ($(this).scrollTop() >= 55) ) {
            $('.header-nav').addClass('header-wrap-fixed');//add1
            $('.products-nav').css("top",hheadernav);
        }
        else if (iCurScrollPos > iScrollPos){
            $('.header-nav').removeClass('header-wrap-fixed');//add1
        }
        var lastScrollTop = 0;
        iScrollPos = iCurScrollPos;
    });   
};
  golink();
 navmenu();
READ ALSO
Как задать функцию через поле формы

Как задать функцию через поле формы

У меня на страничке есть форма, в нее пользователь вводит функцию по определенному шаблону

310
скрыть элемент шапки

скрыть элемент шапки

есть в шапке такие элементы:

311
Передача текста через input radio с javascript [требует правки]

Передача текста через input radio с javascript [требует правки]

При выборе пункта Нет, в форме автоматически добавляется текст "Нет", как это правильно реализовать на JS, заранее спасибо!

260