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();
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
У меня на страничке есть форма, в нее пользователь вводит функцию по определенному шаблону
При выборе пункта Нет, в форме автоматически добавляется текст "Нет", как это правильно реализовать на JS, заранее спасибо!