Нужна помощь по якорным ссылкам на странице с динамической высотой?
Добрый день,
попытаюсь максимально понятно и доступно объяснить всю суть моей проблемы.
Есть страница и ее начальная высота с прокруткой 5500px(узнавал высоту с прокруткой с помощью document.documentelement.scrollheight). Примерно через 1500px прокрутки вниз, на странице начинается анимация(несколько блоков начинают двигаться по экрану и красиво исчезают), процесс которой регулируется прокручиванием страницы(т.е. прокручиваешь вниз, они исчезают, прокручиваешь вверх они появляются и становятся на свои начальные места). После того как анимация завершилась, то высота страницы уже 6300px. Тут и начинается проблема: мои якорные ссылки не переносят на нужное место, т.е. вот на эти 800px на которые увеличилась высота моей страницы они и не доходят до своей цели.
Сейчас эта проблема решена с помощью функции javascript, которая делает 2й клик по ссылке после того как анимация уже отработала и экран остановился в 800х пикселях от цели. В итоге это выглядит не совсем хорошо, т.к. визуально это все происходит в 2 этапа.
Надеюсь, что понятно объяснил. Заранее благодарен.
есть меню и на одном из пунктов которого задан ссылке атрибут a href="#test".../a и есть div id="test". . . /div который находится почти в конце страницы. При нажатии на этот пункт меню должно переносить к этому диву.
next.uamaster.com вот сайт, в меню пункты "кто мы?" и "важное", только нужно переход делать до того как высота увеличится изза анимации... создавали его еще давно до меня, хз что может в скипте на это влиять, но когда анимацию отключаешь то все работает на "ура".
В некоторых случаях там там можно перейти. Я вот сейчас пробую написать функцию одну, которая походу исправит баг этот. В custom.js есть такая переменная var controller = $.superscrollorama(); благодаря которой и работает эта анимация, как я понял..так вот если ей задать var controller = false; то анимация перестает работать и якоря работают отлично. Я написал такую функцию
var myF = document.documentElement.scrollHeight;
function foo(){
if(myF < 6000){
return controller = false;
setTimeout(function(){
return controller = $.superscrollorama();
}, 1500);
});
var myF - определяет высоту сайта всего с прокруткой и если высота меньше 6000 пикселей задает переменной false и включает таймер на возврат работоспособности анимации. возвращая переменной значение $.superscrollorama();
т.е. отключает анимацию и переход происходит нормально, а потом просто возвращает все на свои места.
И поставил пункту меню onclick="foo()"
Но что-то не так...не хочет переписывать значение переменной, может что-то с областью видимости или в чем-то другом проблема...хз :|
@Apxu правда у меня при сохранении через фаерфокс не работают всякие анимации на странице, так что могут быть сюрпризы, но по идее должно нормально работать
Простой
Простой