Jump to content
  • 0

Проблема в JS, скролл табов


sanya.dndz.kh
 Share

Question

На этой страничке http://zimnitskiy.com/peregrin/one-direction.html есть табы, которые скроллятся вместе с контентом,
а на последнем табе их скролл прекращается и дальше скроллится только контент.

Использовал скрипт отсюда http://shpargalkablog.ru/2013/09/scroll-block.html, последний вариант.

Всё работает, но есть баг, который заключается в том, что когда контента не хватает для скролла,

на ul где эти табы остается класс "stop", который вешает скрипт выше для его работы. Этот класс
фиксирует блок и добавляет свойство top равное проскроллиному непроблемного таба.

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

Это заметно на разрешении 1920px с табом "Право социального обеспечения",

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

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

Заранее благодарю.

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Проблему решил, тему можно считать закрытой. Добавил действие в js по клику на li-шке, после чего убирается класс.

Актуальный сайт с решенной проблемой табов .

Edited by sanya.dndz.kh
Добавление актуального сайта.
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

×
×
  • 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