Блог

Редактировать: Я добавил функцию прокрутки windo, которую я делаю, но содержимое вкладок переходит из нее. Как я могу это исправить?

 $(window).scroll(function() { var scroll = $(window).scrollTop();   if (scroll gt;= 500) {  console.log(true);  $(".tabs").addClass("tabs-position");  } else {  console.log(false);  $(".tabs").removeClass("tabs-position");  } });  .tabs-position {  margin-bottom: 50px;  position:sticky;  top: 0;  background-color: red;  }  

У меня есть страница с навигационной панелью и вкладками. Когда я нажимаю на них, я направляю пользователя в раздел на той же странице, используя id атрибут, однако мои вкладки находятся в середине моей страницы, что нормально. Чего я пытаюсь добиться, так это переместить их в раздел «Навигационная панель», когда я нажимаю на них.

Я пытался после attribute , но я ничего не понимаю. Я включил свой код ниже, как я могу заменить их позицию?

 lt;section class="tabs"gt;  lt;div class="container"gt;  lt;div class="row"gt;  lt;div class="col-lg-12"gt;  lt;div class="tab-outer"gt;  lt;div class="tab-list"gt;  lt;ulgt;  lt;ligt;  lt;a href="#room" class="tab-link"gt;Roomslt;/agt;  lt;/ligt;   lt;ligt;  lt;a href="#info"gt;info tablt;/agt;  lt;/ligt;   lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/sectiongt;  

 .tabs {  margin-bottom: 50px;   .tab-outer {  border-bottom: 4px solid #f5f5f5;  position: sticky;  top: 70px;  padding: 20px 0 0 0;    }   .tab-list {  a {  color: #4a4947;  }    ul {  padding: 0 30px;  display: flex;  justify-content: space-between;  list-style-type: none;  }  } }  

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

 .tabs {  margin-bottom: 50px;  position: sticky;  top: 0;  background-color: #ffffff; }  .tabs .tab-outer {  border-bottom: 4px solid #f5f5f5;  top: 70px;  padding: 20px 0 0 0; }  .tabs .tab-list a {  color: #4a4947; }  .tabs .tab-list ul {  padding: 0 30px;  display: flex;  justify-content: space-between;  list-style-type: none; } 

 lt;section class="tabs"gt;  lt;div class="container"gt;  lt;div class="row"gt;  lt;div class="col-lg-12"gt;  lt;div class="tab-outer"gt;  lt;div class="tab-list"gt;  lt;ulgt;  lt;ligt;  lt;a href="#room" class="tab-link"gt;Roomslt;/agt;  lt;/ligt;  lt;ligt;  lt;a href="#info"gt;info tablt;/agt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/sectiongt; lt;div style="height:3600px;width:100%;background-color:blue;color:white;"gt;foolt;/divgt; 

Используя z-индекс, я исправил проблему

 .tabs-position {  margin-bottom: 50px;  position:sticky;  top: 0;  background-color: red;  z-index: 1;  }