Несколько липких заголовков на странице - PullRequest
Новая
       18

Несколько липких заголовков на странице

0 голосов
/ 10 января 2020

У меня есть контент, подобный следующему JSfiddle показывает:

Моя скрипка

Макет моей страницы также похож, где левая половина страницы есть что-то еще, что не входит в сферу этого вопроса, и правая половина показывает содержимое, как в JSFiddle выше.

У меня есть несколько Wrapper div один за другим. Каждый Wrapper div будет содержать n чисел Details div, а каждый Details div состоит из 2 div, а именно. Title и фактическое содержимое.

Если число Details div в Wrapper больше высоты страницы, то при прокрутке вниз Wrapper Title становится скрытым.

Как сделать Wrapper Title липким до конца Wrapper. Как только Wrapper пересечено, Wrapper Title следующего Wrapper должно стать липким.

Пожалуйста, смотрите: липкий заголовок , чтобы понять, о чем я говорю. Я хочу что-то подобное, но у меня есть несколько Wrappers один за другим с разными Wrapper Title, каждый из которых должен стать липким в объеме этого Wrapper. 

.wrapper {
  border: 1px solid blue;
  margin-bottom: 15px;
}

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
}

.detailDiv {
  border: 1px solid red;
  margin-left: 7px;
  margin-bottom: 5px;
  margin-right: 2px;
}

.detailTitle {
  font-size: 1em;
  font-weight: bold;
  background-color: pink;
  padding: 10px;
  margin-bottom: 5px;
}

.details {
  margin-bottom: 5px;
  margin-left: 5px;
}
<!-- Wrapper div 1 -->
<div id="wrapperDiv" class="wrapper">
  <div id="wrapperDivTitle" class="wrapperTitle">
    Wrapper Title 1
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 2 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 2
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 7 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 8 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 9 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 3 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 3
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 4 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 4
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 5 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapper_div_title" class="wrapperTitle">
    Wrapper Title 5
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Добавить позицию, прикрепленную к wrapperTitle

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
}

https://jsfiddle.net/lalji1051/87ub1c4m/7/

0 голосов
/ 10 января 2020

Я адаптировал пример из вашей ссылки для вашей проблемы.

  1. Добавьте уникальный id для каждого заголовка : 

    <div id="wrapperDivTitle1" class="wrapperTitle">
    Wrapper Title 1
</div>

  2. Добавить .sticky класс: 

    .sticky {
   position: fixed;
   top: 0;
   width: 100%;
}

  3. JS код: 

    window.onscroll = function() {myFunction()};

var headers = [1,2,3,4,5].map(i => {        
    let element = document.getElementById("wrapperDivTitle" + i);     
    return {
        element: element,
        sticky: element.offsetTop
    }
});

function myFunction() {
     headers.forEach(item => {
         if (window.pageYOffset > item.sticky) {
             item.element.classList.add("sticky");
         } else { 
             item.element.classList.remove("sticky");
         }
     });
}

Фрагмент 

window.onscroll = function() {myFunction()};

var headers = [1,2,3,4,5].map(i => {
	
	let element = document.getElementById("wrapperDivTitle" + i);

	return {
		element: element,
		sticky: element.offsetTop
	}
});

function myFunction() {
	headers.forEach(item => {
		if (window.pageYOffset > item.sticky) {
		 	item.element.classList.add("sticky");
	 	} else { 
   	 		    item.element.classList.remove("sticky");
	 	}
	});      
}
.wrapper {
  border: 1px solid blue;
  margin-bottom: 15px;
}

.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
}

.detailDiv {
  border: 1px solid red;
  margin-left: 7px;
  margin-bottom: 5px;
  margin-right: 2px;
}

.detailTitle {
  font-size: 1em;
  font-weight: bold;
  background-color: pink;
  padding: 10px;
  margin-bottom: 5px;
}

.details {
  margin-bottom: 5px;
  margin-left: 5px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
<!-- Wrapper div 1 -->
<div id="wrapperDiv" class="wrapper">
  <div id="wrapperDivTitle1" class="wrapperTitle">
    Wrapper Title 1
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 2 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapperDivTitle2" class="wrapperTitle">
    Wrapper Title 2
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 7 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 8 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 9 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 3 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapperDivTitle3" class="wrapperTitle">
    Wrapper Title 3
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 4 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapperDivTitle4" class="wrapperTitle">
    Wrapper Title 4
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
  
    <!-- detail div 4 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 5 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 6 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>

<!-- Wrapper div 5 -->
<div id="wrapper_div" class="wrapper">
  <div id="wrapperDivTitle5" class="wrapperTitle">
    Wrapper Title 5
  </div>
  <!-- detail div 1 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 2 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>

  <!-- detail div 3 -->
  <div id="detailDiv" class="detailDiv">
    <div id="detailDivTitle" class="detailTitle">
      Detail Div
    </div>
    <div id="detailDivDetails" class="details">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt turpis non tincidunt vestibulum. Nulla porttitor sagittis leo in malesuada. Suspendisse maximus scelerisque est, at semper leo dapibus vel. Nam efficitur dui at libero ultricies, posuere fermentum velit fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Curabitur nec nisl sed ligula porta laoreet non at nunc. Mauris laoreet ultrices fermentum. Donec placerat eros vitae egestas vehicula. Etiam at finibus quam, in lacinia mauris. Mauris non ornare massa.
    </div>
  </div>
</div>
...