Jump to content
  • 0

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


DeeNWaR
 Share

Question

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

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

Страница с проблемой - 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

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

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

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

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

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

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

 

Link to comment
Share on other sites

  • 1

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

Link to comment
Share on other sites

  • 0
В 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, само решение, оставляет желать примного лучшего, проще написать уникальное решение под вашу страницу, или же поискать решение по лучше, можете написать мне в личку, думаю я вам помогу.

Link to comment
Share on other sites

  • 0

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

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

 <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;

 

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

 

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By StOK
      У меня на сайте плавающее меню реализовано через скрипт:
      <script type="text/javascript">var $ = jQuery.noConflict();var h_hght=100;var h_mrg=0;jQuery(function(){jQuery(window).scroll(function(){var top=jQuery(this).scrollTop();var elem=jQuery('#top-menu');if(top+h_mrg<h_hght){elem.css('top',(h_hght-top));elem.removeClass('fix')}else{elem.css('top',h_mrg);elem.addClass('fix')}})});</script>
      Стала делать в статьях навигационное меню типа:
      <blockquote><span style="font-weight:bold">Содержание:</span>
      <a href="#a1"><li>Здесь первый пункт содержания</a>
      <a href="#a2"><li>Здесь второй пункт содержания</a></blockquote>
      Каждый подзаголовок заключается в теги: <h2><a2 id="a1">Первый подзаголовок</a2></h2>
      При клике на пункт меню, перебрасывает к подзаголовку, но плавающее меню его скрывает. Что можно задать в скрипте, указанном выше, чтобы подзаголовки не закрывались плавающим меню? Как я поняла, это - var h_mrg=0; отступ от шапки страницы. Как задается отступ снизу в таком скрипте?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy