Как зафиксировать табы наверху страницы при прокрутке страницы?

Question

[tehfoxen]

Где-то в середине страницы реализованы вкладки. Необходимо, чтобы в мобильной версии при прокрутке содержимого табов, сами табы фиксировались наверху страницы и исчезали когда содержимое заканчивается. Как это возможно реализовать на jquery?

Comments

[Alams Stoyne]

Да это возможно,

1. отслеживайте прокрутку
   
2. как дошли до табов закрепляйте их
   
3. как дошли до конца контента открепляйте
   

[tehfoxen]

Alams Stoyne, это понятно, но все равно не то. При переключении табов контент вкладки просматривается с того момента где просматривался другой предыдущий таб. Как правильно их закрепить?

function stickMenu() {
  var windowTop = $(window).scrollTop();
  var sectionStarts = $('#sectionStarts').offset().top;
  var sectionEnds = $('#sectionEnds').offset().top;

  if (windowTop > sectionEnds) {
    $('ul.nav.nav-tabs').removeClass('fixed');
  } else if (windowTop > sectionStarts) {
    $('ul.nav.nav-tabs').addClass('fixed');
  } else {
    $('ul.nav.nav-tabs').removeClass('fixed');
	
  }
 
	

}

[wyzemind]

tehfoxen, при переключении табов просто добавь скролл к нужной секции

$("html, body").animate({
    scrollTop: $('#sectionStarts').offset().top
}, 500);

Answer 1

[Сергей Куплетский]

Для закрепления вкладок можно использовать css-свойство
position: fixed

Первый вариант:
Определите границы содержимого табов и при скролле проверяйте нужно ли держать табы закрепленными или нет. Пример (неоптимальный) того как это можно сделать: https://jsfiddle.net/xynk2puc/8/

Второй вариант: для отслеживания отображения содержимого табов можно использовать плагин jquery.appear или аналогичный.

Тогда код будет примерно таким:

$('someselector').on('appear', function(event, $appearedElements) {
  // тут добавляете css для закрепления вкладок
});
$('someselector').on('disappear', function(event, $disappearedElements) {
  //  тут убираете css для закрепления вкладок
});

Comments

[tehfoxen]

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

[Сергей Куплетский]

Если я правильно понял, то после переключения вкладки делайте скролл в начало контейнера:

$("html, body").animate({ scrollTop: $("#CONTAINER_ID").scrollTop() }, 500);

[tehfoxen]

Сергей Куплетский, Это работает для меня, спасибо. Подскажите,пожалуйста, а как повесить это событие на второй клик? Дело в том, что у меня табы по умолчанию свернуты в мобильной версии и чтобы переключится на другой таб необдимо кликнуть по текущему, тогда всплывают все табы и потом уже идет переключение.

[Сергей Куплетский]

tehfoxen, можете при клике проверять наличие специфичного класса для свернутого/развернутого состояния и в зависимости от него делать скролл

[tehfoxen]

Сергей Куплетский, не выходит. Подскажите, как правильно. Мне нужен проверка на li, в котором нет класса toggle

$("ul.nav.nav-tabs li").click(function(){
	if($('li.active').not('toggle')) {
	
	 event.preventDefault();
$("html, body").animate({
    scrollTop: $('.tab-content').offset().top - 100
}, 500);

}

});

[Сергей Куплетский]

if ($('li.active').hasClass('toggle') === false)

[tehfoxen]

Сергей Куплетский, спасибо огромное!

Answer 2

[wyzemind]

https://codepen.io/wvvwpro/pen/wvKpMKW