Я столкнулся с чем-то очень странным.Вероятность того, что это ошибка в моем коде, высока, но я не могу понять, почему это происходит.
Во-первых, вот пример страницы: http://designintellection.com/quotes/2011/jan/13/design-thinking-visual/
Если вы заметили дваНавигационные вкладки в правой части страницы, когда вы прокручиваете их вниз, уменьшаются в размере, а затем становятся позиционными: фиксируются при прокрутке вниз по остальной части страницы.Когда вы прокручиваете назад вверх, они увеличиваются до своего первоначального размера и возвращаются к нефиксированному позиционированию.(Если вам интересно, почему я сокращаю их, я в конечном итоге собираюсь заменить текст значком.)
Я разместил код (JS & CSS) для достижения этого эффекта ниже.Я знаю, что это может быть написано лучше, но главное, что я пытаюсь различить, это то, что Javascript способен захватывать каждую конкретную позицию прокрутки.Я говорю это потому, что если вы прокручиваете медленно, то вкладки ведут себя так, как они должны, вы можете перемещаться вверх и вниз сколько угодно.Однако, если вы прокручиваете с нормальной до быстрой скорости, то размер, поля и расположение распадаются, и вы получаете очень странное поведение.
На каком-то уровне мне кажется, что я принимаю сумасшедшие таблетки, обычно я стараюсьискать ошибки и т. д., но мне кажется настолько странным, что он работает при медленной прокрутке и не работает при быстрой прокрутке.
jQuery:
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 80) {
$("#the-portfolio-link").css({"width":"2px", "margin-top":"0"});
$("#the-portfolio-link").addClass("page-link-portfolio-stay");
$("#the-services-link").css({"margin-top":"108px"});
}
if ((scroll >= 22) && (scroll < 80)) {
$("#the-portfolio-link").css({"width":"60px", "margin-top":"65px"});
$("#the-portfolio-link").removeClass("page-link-portfolio-stay");
var new_width = 60 + (22 - scroll);
var existing_margin = 65;
var new_margin_services = 65 - (60 - new_width);
if (existing_margin < 65) {
var new_margin = 65 - (67 - new_width);
var margin_top = new_margin;
}
else {
var margin_top = 65;
}
$("#the-portfolio-link").css({"width":new_width+"px", "margin-top":margin_top+"px"});
$("#the-services-link").css({"margin-top":new_margin_services+"px"});
}
if ((scroll > 80) && (scroll <= 138)) {
$("#the-services-link").css({"width":"60px", "margin-top":"108px"});
$("#the-services-link").removeClass("page-link-services-stay");
var new_services_width = 60 + (80 - scroll);
var existing_services_margin = $("#the-services-link").css("margin-top").replace("px","");
var margin_services_top = 108 + (60 - new_services_width);
$("#the-services-link").css({"width":new_services_width+"px", "margin-top":margin_services_top+"px"});
}
if (scroll > 138) {
$("#the-services-link").css({"width":"2px", "margin-top":"0"});
$("#the-services-link").addClass("page-link-services-stay");
}
});
});
CSS (соответствующий кодтолько):
.main-nav { position:absolute; left:1102px; top:55px; }
.main-nav-link { display:block; width:60px; height:22px; margin:65px 0 0 36px; }
.page-link-portfolio-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:40px; overflow:hidden; }
.page-link-services-stay { width:2px; margin-top:0; position:fixed; left:1102px; top:83px; overflow:hidden; }
Любые идеи и т. д. очень ценятся.
Спасибо!-Давид