Плавающее боковое меню дергается при скроле вниз

[DeeNWaR]

Салют товарищи! Беда скорее всего в CSS, так как такой же скрипт отлично работает на демо странице его автора.

На сайте реализовано плавающее боковое меню, но оно, зараза дергается при скроле вниз. Когда вверх - все норм. Может там всё элементарно, да я туплю просто? Подскажите пожалуйста, в какую сторону копать хотя бы 

Страница с проблемой - https://virtualrift.net/games/ar/the_machines_mnogopolzovatelskaja_igra_v_dopolnennoj_realnosti_odobrennaja_samoj_apple/2-1-0-5003?lk6hKO

Взято от суда - http://shpargalkablog.ru/2013/09/scroll-block.html#pr8 В демо, такой же скрипт работает гладко http://sticky01.blogspot.ru/2015/05/1.html

[andrey7287]

Да, отстой какой то.  Я думаю проще самому написать несколько строк кода.

Edited December 15, 2017 by andrey7287

[Switch74]

бывают подобные проблемы, в связке с другими модулями
бывало у меня что на такое же передвижение меню влияла яндекс карта в контенте, причем дергания были только тогда, когда меню пролетало рядом с картой.
Возможно у вас подобная проблема, а вообще меньше пользуйтесь сторонним кодом, чем его больше тем больше словить глюки и не понять откуда это берется.

[DeeNWaR]

1 час назад, Switch74 сказал:

бывают подобные проблемы, в связке с другими модулями
бывало у меня что на такое же передвижение меню влияла яндекс карта в контенте, причем дергания были только тогда, когда меню пролетало рядом с картой.
Возможно у вас подобная проблема, а вообще меньше пользуйтесь сторонним кодом, чем его больше тем больше словить глюки и не понять откуда это берется.

Это дааа.... Просто очень хочется прикрутить подобный скрипт на сайт, для удобства пользователей, а подробно вникнуть в написание JS не хватает времени. 

Я уже пробовал отрубать другие скрипты, тоже думал может конфликтуют, но нет. При прокрутке вниз, после касания нижней части блока - нижнего края браузера, не происходит фиксация блока стилем .sticky, отсюда и дерганье. Уже всю голову сломал...

.sticky {
 position: fixed;
 z-index: 101;
}
.stop {
 position: relative;
 z-index: 101;
}

 

[Switch74]

попробуйте использовать данный скрипт в идеальных условиях и добавляйте в них потихоньку свои скрипты и модули, так найдете с чем конфликтует скрипт. Еще это может быть css который влияет на плавающее меню.
Т.к. скрипт в идеальных условиях в демо работает норм, скорее всего он именно с чем-то конфликтует.
На данный момент у вас скрипт через раз определяет правильную высоту плавающего блока из-за чего и скачет.
Я вижу у вас есть информация, которая грузится через js в плавающий блок, возможно она влияет на это.
Еще бывает такой момент: когда сайт перегружен скриптами и они все отрабатывают на одно и то же событие, на это тратится время, что приводит к задержке отработки последних скриптов и как результат они могут отрабатывать с задержкой.

[pichs_up]

В 13.12.2017 в 20:04, DeeNWaR сказал:

Салют товарищи! Беда скорее всего в CSS, так как такой же скрипт отлично работает на демо странице его автора.

На сайте реализовано плавающее боковое меню, но оно, зараза дергается при скроле вниз. Когда вверх - все норм. Может там всё элементарно, да я туплю просто? Подскажите пожалуйста, в какую сторону копать хотя бы 

Страница с проблемой - https://virtualrift.net/games/ar/the_machines_mnogopolzovatelskaja_igra_v_dopolnennoj_realnosti_odobrennaja_samoj_apple/2-1-0-5003?lk6hKO

Взято от суда - http://shpargalkablog.ru/2013/09/scroll-block.html#pr8 В демо, такой же скрипт работает гладко http://sticky01.blogspot.ru/2015/05/1.html

Я посмотрел скрипты, вероятнее всего, проблема в том, что меняются два класса при скроле вниз с разным позиционированием relative и fixed, само решение, оставляет желать примного лучшего, проще написать уникальное решение под вашу страницу, или же поискать решение по лучше, можете написать мне в личку, думаю я вам помогу.

[DeeNWaR]

Так и не получилось заставить менюху ездить нормально. Просто растянул в итоге боковое меню на всю высоту страницы, что тоже оказалось не просто...

Скрипт рассчитывает высоту от родителя

 <script type="text/javascript">
        $(document).ready(function() {
         function setEqualHeight(columns)
         {
         var tallestcolumn = 0;
         columns.each(
         function()
         {
         currentHeight = $(this).height();
         if(currentHeight > tallestcolumn)
         {
         tallestcolumn  = currentHeight;
         }
         }
         );
         columns.height(tallestcolumn);
         }
         setEqualHeight($(".w-middle,.w-container"));
        });
    </script>

А содержимое блока распределяется равномерно, через стиль display: inline-grid;

 

Может кому полезно будет, кто так же заморочиться с боковым меню 

 

Всем респект, кто помочь пытался. Вы классные! 

[andrey7287]

19 часов назад, DeeNWaR сказал:

через стиль display: inline-grid;

Ну если ты прям вот так забиваешь на кросбраузерность, можно и меню через position: sticky  сделать . Ну а вообще это конечно не серьёзный подход делу. Во первых влепил grid в сайт на флоатах. Даже не flex, очень жёстко -). Во вторых задача стояла елементарная,  а ты сделал какой то финт ушами.  

[DeeNWaR]

3 часа назад, andrey7287 сказал:

Ну если ты прям вот так забиваешь на кросбраузерность, можно и меню через position: sticky  сделать . Ну а вообще это конечно не серьёзный подход делу. Во первых влепил grid в сайт на флоатах. Даже не flex, очень жёстко -). Во вторых задача стояла елементарная,  а ты сделал какой то финт ушами.  

Ну как, кому-то элементарная, а кто-то уже недели три голову над этим ломал ) Время время... 

Чем grid плох? Я загуглил смысл свойства, управление выравниванием как раз то что нужно было для решения. На разных браузерах проверял, проблем не обнаружил - отображается как положено  К каким проблемам может привести это свойство?