обновленный

Я старался изо всех сил, чтобы отразить мой сценарий. Боковая панель не будет там с самого начала, и пользователь может скрыть ее, если он / она этого хочет. Этот код выглядит так:

{amp}lt;!doctype html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"{amp}gt; {amp}lt;meta name="description" content=""{amp}gt; {amp}lt;meta name="author" content=""{amp}gt; {amp}lt;title{amp}gt;Starter Template for Bootstrap{amp}lt;/title{amp}gt; {amp}lt;link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/"{amp}gt; {amp}lt;!-- Bootstrap core CSS --{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"{amp}gt; {amp}lt;!-- Custom styles for this template --{amp}gt; {amp}lt;style{amp}gt; .starter-template { padding: 3rem 1.5rem; text-align: center; } #editUnitBlock{ display: none; width: 100%; position: relative !important; } #editUnitBlock .ibox-content{ padding: 25px 0px 10px 0px; border: 0px; } .floorStackColSmall { max-width: 58.333333%; } .floorStackColLarge { max-width: 83.333333%; } /*#unitAmenitiesLoading{ position: relative; }*/ #unitAmenitiesLoading.sticky { position:fixed; top:5px; width: inherit; max-width: 25%; } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;nav class="navbar navbar-expand-md navbar-dark bg-dark"{amp}gt; {amp}lt;a class="navbar-brand" href="#"{amp}gt;Navbar{amp}lt;/a{amp}gt; {amp}lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"{amp}gt; {amp}lt;span class="navbar-toggler-icon"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"{amp}gt; {amp}lt;ul class="navbar-nav mr-auto"{amp}gt; {amp}lt;li class="nav-item active"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Home {amp}lt;span class="sr-only"{amp}gt;(current){amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Link{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link disabled" href="#"{amp}gt;Disabled{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item dropdown"{amp}gt; {amp}lt;a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{amp}gt;Dropdown{amp}lt;/a{amp}gt; {amp}lt;div class="dropdown-menu" aria-labelledby="dropdown01"{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Another action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Something else here{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;form class="form-inline my-2 my-lg-0"{amp}gt; {amp}lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"{amp}gt; {amp}lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"{amp}gt;Search{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;main role="main" class="container-fluid main-conatiner"{amp}gt; {amp}lt;div class="starter-template"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-2"{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies. Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida. Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam. Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt. Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="floorStackTable" class="col-md-10 floorStackColLarge"{amp}gt; {amp}lt;a href="#" onclick="editUnit()"{amp}gt;Show sidebar{amp}lt;/a{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies. Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida. Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam. Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt. Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-3 " id="editUnitBlock"{amp}gt; {amp}lt;div id="unitAmenitiesLoading" class="ibox-content"{amp}gt; {amp}lt;div class="card"{amp}gt; {amp}lt;div class="card-header"{amp}gt; Featured {amp}lt;/div{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;h5 class="card-title"{amp}gt;SIDEBAR TO BE STICKY{amp}lt;/h5{amp}gt; {amp}lt;a href="#" onclick="hideEditUnitBlock()"{amp}gt;HideSideBar{amp}lt;/a{amp}gt; {amp}lt;p class="card-text"{amp}gt;With supporting text below as a natural lead-in to additional content.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae. {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis! {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;footer id="footer"{amp}gt; {amp}lt;h2{amp}gt;Footer{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum. {amp}lt;/p{amp}gt; {amp}lt;/footer{amp}gt;{amp}lt;br type="_moz"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt;{amp}lt;!-- /.container --{amp}gt; {amp}lt;!-- Bootstrap core JavaScript ================================================== --{amp}gt; {amp}lt;!-- Placed at the end of the document so the pages load faster --{amp}gt; {amp}lt;script{amp}gt; function editUnit(){ showEditUnitBlock(); } function showEditUnitBlock() { $('#editUnitBlock').show(); // $('#unitAmenitiesLoading').floatit({ // limiter: 'footer', // preserve_width: true, // top_spacing: 40, // bottom_spacing: 10, // recalculate: true // }); $('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge"); } function hideEditUnitBlock() { $('#editUnitBlock').hide(); $('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall"); } {amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="jquery.floatit.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; $(function(){ // $('#unitAmenitiesLoading').floatit({ // limiter: 'footer', // preserve_width: true, // top_spacing: 40, // bottom_spacing: 10, // recalculate: true // }); // Cache our vars for the fixed sidebar on scroll var $sidebar = $('#unitAmenitiesLoading'); // Get {amp}amp; Store the original top of our #sidebar-nav so we can test against it var sidebarTop = $sidebar.position().top; var $footer = $('#footer'); var footerTop = $footer.position().top; // Edit the `- 10` to control when it should disappear when the footer is hit. var blogHeight = $('#floorStackTable').outerHeight() - 10; console.log(blogHeight); console.log(sidebarTop); console.log(footerTop); // Add the function below to the scroll event $(window).scroll(fixSidebarOnScroll); // On window scroll, this fn is called (binded above) function fixSidebarOnScroll(){ // Cache our scroll top position (our current scroll position) var windowScrollTop = $(window).scrollTop(); console.log(windowScrollTop); // Add or remove our sticky class on these conditions if (windowScrollTop {amp}gt;= blogHeight || windowScrollTop {amp}lt;= sidebarTop || window.innerHeight   window.scrollY {amp}gt; blogHeight){ // Remove when the scroll is greater than our #content.OuterHeight() // or when our sticky scroll is above the original position of the sidebar $sidebar.removeClass('sticky'); } // Scroll is past the original position of sidebar else if (windowScrollTop {amp}gt;= sidebarTop){ // Otherwise add the sticky if $sidebar doesnt have it already! if (!$sidebar.hasClass('sticky')){ $sidebar.addClass('sticky'); } } } }) {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

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

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

Я довольно новичок в этих jquery, так что любой может мне помочь, исправив код jsfiddle.

Пожалуйста, дайте мне знать, если вам нужны дальнейшие разъяснения с моей стороны.

Обновление: 2.0 Я ищу что-то вроде http://webpop.github.io/jquery.pin/, здесь вы можете видеть, что на боковой панели закреплено поле (осталось фиксированным) до определенной точки прокрутки, затем начните прокрутку после этого.

в таких случаях в основном я использую плагин jQuery «Простая липкая боковая панель». Простой код Sticky Sidebar и документацию можно найти здесь https://github.com/ismailfarooq/simple-sticky-sidebar

Смотрите ниже пример:

 .text{ padding-bottom: 50px; padding-top: 20px; border-bottom: 1px solid #ccc; } .footer{ background: #333; color: #fff; padding: 30px 0; width: 100%; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;header class="main-header"{amp}gt; {amp}lt;div class="container"{amp}gt;{amp}lt;h3{amp}gt;Simple Sticky Sidebar{amp}lt;/h3{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/header{amp}gt; {amp}lt;div class="area"{amp}gt;{amp}lt;h1{amp}gt;Simple Sticky Sidebar{amp}lt;/h1{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-lg-3 col-sm-3"{amp}gt; {amp}lt;div class="sidebar"{amp}gt; {amp}lt;div class="sidebar-inner"{amp}gt; {amp}lt;div class="text"{amp}gt; {amp}lt;h2{amp}gt; Sidebar Content{amp}lt;/h2{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;Sidebar Content{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-lg-9 col-sm-9"{amp}gt; {amp}lt;div class="search-content"{amp}gt; {amp}lt;div class="content"{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;content{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="text"{amp}gt;{amp}lt;h2{amp}gt; Content {amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id justo eu ligula laoreet sodales ut nec velit. Quisque auctor, metus a pharetra rhoncus, lorem massa scelerisque dolor, nec varius odio nulla sit amet est. Duis tempus sapien at tincidunt gravida. Suspendisse vitae malesuada eros, sed ullamcorper ante. Vivamus eget condimentum odio, sed feugiat tortor. Vestibulum accumsan, sem a auctor tincidunt, metus dui sagittis eros, eget interdum odio sem id eros. Nullam non sem at justo eleifend fermentum at vel felis. {amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="footer"{amp}gt; {amp}lt;h2{amp}gt; #FOOTER Content {amp}lt;/h2{amp}gt; {amp}lt;br/{amp}gt; #FOOTER{amp}lt;br/{amp}gt; #FOOTER{amp}lt;br/{amp}gt; #FOOTER{amp}lt;br/{amp}gt; #FOOTER{amp}lt;br/{amp}gt; #FOOTER{amp}lt;br/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- {amp}lt;script type="text/javascript" src="js/simple-sticky-sidebar.js"{amp}gt;{amp}lt;/script{amp}gt; --{amp}gt; {amp}lt;!-- Uncomment this script and add Simple Sticky Sidebar JS from your local. You can download Simple Sticky Sidebar from Github Repo --{amp}gt; {amp}lt;!-- Remove below when you are working on local --{amp}gt; {amp}lt;script{amp}gt; /* ======================================================================== * Simple Sticky Sidebar * @version 0.1 * @author Ismail Farooq {amp}lt;ismail_farooq@yahoo.com{amp}gt; * @license The MIT License (MIT) (https://github.com/ismailfarooq/simple-sticky-sidebar/blob/master/LICENSE) * ======================================================================== */ function setStyle(element, cssProperty) { for (var property in cssProperty){ element.style[property] = cssProperty[property]; } } function destroySticky(element){ setStyle(element, { top : '', left : '', bottom : '', width : '', position : '' }); } function getOffset(el) { el = el.getBoundingClientRect(); return { left: el.left   window.scrollX, top: el.top   window.scrollY } } function simpleStickySidebar(element, options) { // Global options var sticky = document.querySelector(element); // Sticky sidebar var container = document.querySelector(options.container); // Sticky sidebar container var topSpace = options.topSpace ? options.topSpace : 0; // Top spacing after sticky var bottomSpace = options.bottomSpace ? options.bottomSpace : 0; // Bottom spacing after sticky // vars var $window = window; // window var stickyHeight = sticky.getBoundingClientRect().height; // Sticky sidebar height var stickyOffsetTop = getOffset(sticky).top; // Sticky sidebar top offset var stickyOffsetBottom = getOffset(sticky).top   sticky.getBoundingClientRect().height; // Sticky sidebar bottom offset var stickyOffsetLeft = getOffset(sticky).left; // Sticky sidebar left offset var topFixed = false; // checkpoint var bottomFixed = false; // checkpoint var lastScrollVal = 0; // checkpoint var getStickyHeight = function() { return document.querySelector(element).getBoundingClientRect().height; }; // scrolling window.addEventListener('scroll', function(event) { var scrollTop = window.scrollY; // when scroll position touch the "Sidebar" if(scrollTop {amp}gt; stickyOffsetTop - topSpace){ // if "Sidebar" smaller than viewport if(getStickyHeight() {amp}lt;= $window.innerHeight - topSpace){ // fix "Sidebar" from top setStyle(sticky, { top : topSpace   "px", left : stickyOffsetLeft   "px", bottom : '', width : sticky.getBoundingClientRect().width   "px", position : 'fixed' }); } else { // scrolling down if (scrollTop {amp}gt; lastScrollVal){ // if "Sidebar" fixed from top during scrolling down if(topFixed){ // get new offset of "Sidebar" var absoluteStickyOffsetTop = getOffset(sticky).top; setStyle(sticky, { top : absoluteStickyOffsetTop - getOffset(container).top   "px", left : '', bottom : '', width : '', position : 'absolute' }); topFixed = false; } // make "Sidebar" fixed from bottom when bottom area visible in viewport if(scrollTop {amp}gt; stickyOffsetBottom - $window.innerHeight){ setStyle(sticky, { top : '', left : stickyOffsetLeft   "px", bottom : bottomSpace   "px", width : sticky.getBoundingClientRect().width   "px", position : 'fixed' }); bottomFixed = true; } } else { // scrolling up // get new offset of "Sidebar" during scrolling up var absoluteStickyOffsetTop = getOffset(sticky).top; // if "Sidebar" fixed from bottom, stop sticky to its position if(bottomFixed){ setStyle(sticky, { top : absoluteStickyOffsetTop - getOffset(container).top   "px", left : '', bottom : '', width : '', position : 'absolute' }); bottomFixed = false; } // make "Sidebar" fixed from top when top area visible in viewport if(scrollTop {amp}lt; absoluteStickyOffsetTop - topSpace){ setStyle(sticky, { top : topSpace   "px", left : stickyOffsetLeft   "px", bottom : '', width : sticky.getBoundingClientRect().width   "px", position : 'fixed' }); topFixed = true; } } lastScrollVal = scrollTop; } } else { // make sidebar to default position destroySticky(sticky); } }); } {amp}lt;/script{amp}gt; {amp}lt;!-- Remove above --{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; simpleStickySidebar('.sidebar-inner', { container: '.sidebar', topSpace: document.querySelector('.main-header').getBoundingClientRect().height   20, // or any no ie 20 bottomSpace : document.querySelector('.footer').getBoundingClientRect().height   20 }); {amp}lt;/script{amp}gt; 

Добавьте div внутри класса .col который должен иметь «липкую» функциональность. Дайте этому классу div стиль, с которым он будет стилизован, и установите position: sticky этот div .

Это позволит новому div стать липким или статичным в зависимости от комнаты в столбце родителя.
Вы можете установить смещения триггера top , left , right и bottom .

Проверьте фрагмент, чтобы увидеть его в действии.

 $(function() { // $('#unitAmenitiesLoading').floatit({ // limiter: 'footer', // preserve_width: true, // top_spacing: 40, // bottom_spacing: 10, // recalculate: true // }); // Cache our vars for the fixed sidebar on scroll var $sidebar = $('#unitAmenitiesLoading'); // Get {amp}amp; Store the original top of our #sidebar-nav so we can test against it var sidebarTop = $sidebar.position().top; var $footer = $('#footer'); var footerTop = $footer.position().top; // Edit the `- 10` to control when it should disappear when the footer is hit. var blogHeight = $('#floorStackTable').outerHeight() - 10; // console.log(blogHeight); // console.log(sidebarTop); // console.log(footerTop); // Add the function below to the scroll event $(window).scroll(fixSidebarOnScroll); // On window scroll, this fn is called (binded above) function fixSidebarOnScroll() { // Cache our scroll top position (our current scroll position) var windowScrollTop = $(window).scrollTop(); //console.log(windowScrollTop); // Add or remove our sticky class on these conditions if (windowScrollTop {amp}gt;= blogHeight || windowScrollTop {amp}lt;= sidebarTop || window.innerHeight   window.scrollY {amp}gt; blogHeight) { // Remove when the scroll is greater than our #content.OuterHeight() // or when our sticky scroll is above the original position of the sidebar $sidebar.removeClass('sticky'); } // Scroll is past the original position of sidebar else if (windowScrollTop {amp}gt;= sidebarTop) { // Otherwise add the sticky if $sidebar doesnt have it already! if (!$sidebar.hasClass('sticky')) { $sidebar.addClass('sticky'); } } } }) 
 .sticky { position: -webkit-sticky; position: sticky; top: 50px; bottom: 50px; } .starter-template { padding: 3rem 1.5rem; text-align: center; } #editUnitBlock { display: none; width: 100%; position: relative !important; } #editUnitBlock .ibox-content { padding: 25px 0px 10px 0px; border: 0px; } .floorStackColSmall { max-width: 58.333333%; } .floorStackColLarge { max-width: 83.333333%; } /*#unitAmenitiesLoading{ position: relative; }*/ #unitAmenitiesLoading.sticky { position: fixed; top: 5px; width: inherit; max-width: 25%; } 
 {amp}lt;!doctype html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"{amp}gt; {amp}lt;meta name="description" content=""{amp}gt; {amp}lt;meta name="author" content=""{amp}gt; {amp}lt;title{amp}gt;Starter Template for Bootstrap{amp}lt;/title{amp}gt; {amp}lt;link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/"{amp}gt; {amp}lt;!-- Bootstrap core CSS --{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;nav class="navbar navbar-expand-md navbar-dark bg-dark"{amp}gt; {amp}lt;a class="navbar-brand" href="#"{amp}gt;Navbar{amp}lt;/a{amp}gt; {amp}lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"{amp}gt; {amp}lt;span class="navbar-toggler-icon"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"{amp}gt; {amp}lt;ul class="navbar-nav mr-auto"{amp}gt; {amp}lt;li class="nav-item active"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Home {amp}lt;span class="sr-only"{amp}gt;(current){amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Link{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link disabled" href="#"{amp}gt;Disabled{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item dropdown"{amp}gt; {amp}lt;a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{amp}gt;Dropdown{amp}lt;/a{amp}gt; {amp}lt;div class="dropdown-menu" aria-labelledby="dropdown01"{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Another action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Something else here{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;form class="form-inline my-2 my-lg-0"{amp}gt; {amp}lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"{amp}gt; {amp}lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"{amp}gt;Search{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;main role="main" class="container-fluid main-conatiner"{amp}gt; {amp}lt;div class="starter-template"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-2"{amp}gt; {amp}lt;!-- Added sticky here --{amp}gt; {amp}lt;div class="sticky"{amp}gt; {amp}lt;p{amp}gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- --{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="floorStackTable" class="col-md-10 floorStackColLarge"{amp}gt; {amp}lt;a href="#" onclick="editUnit()"{amp}gt;Show sidebar{amp}lt;/a{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies. Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida. Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam. Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt. Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-3 " id="editUnitBlock"{amp}gt; {amp}lt;div id="unitAmenitiesLoading" class="ibox-content"{amp}gt; {amp}lt;div class="card"{amp}gt; {amp}lt;div class="card-header"{amp}gt; Featured {amp}lt;/div{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;h5 class="card-title"{amp}gt;SIDEBAR TO BE STICKY{amp}lt;/h5{amp}gt; {amp}lt;a href="#" onclick="hideEditUnitBlock()"{amp}gt;HideSideBar{amp}lt;/a{amp}gt; {amp}lt;p class="card-text"{amp}gt;With supporting text below as a natural lead-in to additional content.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae. {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis! {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;footer id="footer"{amp}gt; {amp}lt;h2{amp}gt;Footer{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum. {amp}lt;/p{amp}gt; {amp}lt;/footer{amp}gt;{amp}lt;br type="_moz"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt; {amp}lt;!-- /.container --{amp}gt; {amp}lt;!-- Bootstrap core JavaScript ================================================== --{amp}gt; {amp}lt;!-- Placed at the end of the document so the pages load faster --{amp}gt; {amp}lt;script{amp}gt; function editUnit() { showEditUnitBlock(); } function showEditUnitBlock() { $('#editUnitBlock').show(); // $('#unitAmenitiesLoading').floatit({ // limiter: 'footer', // preserve_width: true, // top_spacing: 40, // bottom_spacing: 10, // recalculate: true // }); $('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge"); } function hideEditUnitBlock() { $('#editUnitBlock').hide(); $('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall"); } {amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="jquery.floatit.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; и {amp}lt;!doctype html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"{amp}gt; {amp}lt;meta name="description" content=""{amp}gt; {amp}lt;meta name="author" content=""{amp}gt; {amp}lt;title{amp}gt;Starter Template for Bootstrap{amp}lt;/title{amp}gt; {amp}lt;link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/"{amp}gt; {amp}lt;!-- Bootstrap core CSS --{amp}gt; {amp}lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;nav class="navbar navbar-expand-md navbar-dark bg-dark"{amp}gt; {amp}lt;a class="navbar-brand" href="#"{amp}gt;Navbar{amp}lt;/a{amp}gt; {amp}lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"{amp}gt; {amp}lt;span class="navbar-toggler-icon"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;div class="collapse navbar-collapse" id="navbarsExampleDefault"{amp}gt; {amp}lt;ul class="navbar-nav mr-auto"{amp}gt; {amp}lt;li class="nav-item active"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Home {amp}lt;span class="sr-only"{amp}gt;(current){amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="#"{amp}gt;Link{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link disabled" href="#"{amp}gt;Disabled{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item dropdown"{amp}gt; {amp}lt;a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{amp}gt;Dropdown{amp}lt;/a{amp}gt; {amp}lt;div class="dropdown-menu" aria-labelledby="dropdown01"{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Another action{amp}lt;/a{amp}gt; {amp}lt;a class="dropdown-item" href="#"{amp}gt;Something else here{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;form class="form-inline my-2 my-lg-0"{amp}gt; {amp}lt;input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"{amp}gt; {amp}lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"{amp}gt;Search{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;main role="main" class="container-fluid main-conatiner"{amp}gt; {amp}lt;div class="starter-template"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-2"{amp}gt; {amp}lt;!-- Added sticky here --{amp}gt; {amp}lt;div class="sticky"{amp}gt; {amp}lt;p{amp}gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- --{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="floorStackTable" class="col-md-10 floorStackColLarge"{amp}gt; {amp}lt;a href="#" onclick="editUnit()"{amp}gt;Show sidebar{amp}lt;/a{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et augue ut risus tincidunt euismod. Nullam in justo vel nisi suscipit interdum non eu risus. Nullam consectetur justo quis feugiat tristique. Morbi vel massa non erat mollis viverra at pretium erat. Mauris non faucibus lacus. Vivamus pharetra turpis in dui tristique imperdiet. Curabitur fringilla orci ipsum, a porta dolor lobortis venenatis. Suspendisse sodales tellus tempor, dignissim ligula eu, ultricies ante. Phasellus feugiat maximus purus nec ultricies. Donec semper ipsum in egestas semper. Curabitur gravida libero enim. Aliquam dapibus nulla in tellus molestie, in tincidunt erat accumsan. Donec ornare vitae risus ut condimentum. Donec tincidunt aliquam purus, eget tristique neque hendrerit id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris mollis lacus at lacinia scelerisque. Suspendisse porttitor rhoncus nulla, at viverra dui suscipit vitae. Sed a metus sed nulla tempus mattis in nec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam consequat elit enim, non sollicitudin justo maximus sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean aliquet suscipit lectus tristique egestas. Phasellus ipsum orci, congue eu consectetur non, porta et neque. Cras vitae ultricies lorem. Quisque euismod suscipit erat et gravida. Sed mattis, dolor sed maximus finibus, erat quam aliquam ipsum, et semper odio ante ut odio. Nulla fermentum arcu a tellus maximus, ac auctor justo venenatis. Pellentesque condimentum, lorem non scelerisque maximus, purus sem lobortis quam, sit amet fermentum enim orci pharetra risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed nulla vel nisi auctor convallis. Nulla ut consectetur odio, sit amet pellentesque leo. Vestibulum dapibus pulvinar odio sed malesuada. Quisque molestie tellus eget quam maximus, eget pellentesque eros aliquam. Vestibulum fringilla, turpis et interdum lacinia, eros felis vulputate turpis, ut pulvinar velit lacus id lorem. Maecenas rutrum, arcu ut ultrices varius, purus nulla scelerisque ante, quis rutrum ante metus in nulla. Aenean bibendum, libero vehicula rutrum tristique, metus turpis tempus nisi, eget elementum nulla ipsum sed justo. Nunc sit amet faucibus leo, nec molestie mauris. Pellentesque sit amet ex posuere, pellentesque dolor et, porttitor ex. Sed faucibus sapien id luctus sodales. Morbi ac efficitur odio. Phasellus non molestie tortor. Sed id arcu ligula. Vestibulum ut maximus ex. Proin faucibus tincidunt tincidunt. Donec sed pretium ipsum. Praesent nec nisl vel libero lobortis vulputate sit amet nec diam. Mauris tortor erat, egestas ut tincidunt quis, bibendum et lorem. Integer laoreet, nunc quis lobortis iaculis, ipsum sem molestie orci, nec accumsan diam enim eget mi. Mauris porttitor purus eget nulla varius accumsan. Etiam gravida tempus turpis, vel bibendum lorem ullamcorper et. Sed non massa luctus, viverra arcu et, molestie nunc. Praesent eu quam et mauris pellentesque tempus. Etiam lacinia nunc eget mauris pellentesque faucibus. Fusce turpis ante, tincidunt vel sagittis at, pretium vel urna. Ut metus dui, aliquam id eros ac, tristique convallis sem. In ut leo tincidunt, interdum turpis eget, pulvinar neque. Donec nec sagittis quam. Donec nec lorem ex. Sed quis nisl id ex efficitur sollicitudin. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-3 " id="editUnitBlock"{amp}gt; {amp}lt;div id="unitAmenitiesLoading" class="ibox-content"{amp}gt; {amp}lt;div class="card"{amp}gt; {amp}lt;div class="card-header"{amp}gt; Featured {amp}lt;/div{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;h5 class="card-title"{amp}gt;SIDEBAR TO BE STICKY{amp}lt;/h5{amp}gt; {amp}lt;a href="#" onclick="hideEditUnitBlock()"{amp}gt;HideSideBar{amp}lt;/a{amp}gt; {amp}lt;p class="card-text"{amp}gt;With supporting text below as a natural lead-in to additional content.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio doloremque dicta consequuntur vel asperiores magnam totam, unde sequi rerum beatae excepturi praesentium dolorum nihil a. Provident asperiores alias consequuntur repudiandae. {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis consequatur iusto quidem nulla earum eos distinctio, tempore placeat rem, magni officia commodi mollitia qui quasi laborum. Facilis, delectus iure debitis! {amp}lt;/p{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, soluta recusandae commodi esse! Reprehenderit officia facere aliquid ipsa, totam quod illo praesentium eaque nobis, corporis placeat est esse, repellendus perferendis. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;footer id="footer"{amp}gt; {amp}lt;h2{amp}gt;Footer{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio asperiores suscipit aut quasi obcaecati tempora vel eum, reprehenderit dolores quidem deserunt explicabo quisquam repellendus! Possimus ex, esse in sed illum. {amp}lt;/p{amp}gt; {amp}lt;/footer{amp}gt;{amp}lt;br type="_moz"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt; {amp}lt;!-- /.container --{amp}gt; {amp}lt;!-- Bootstrap core JavaScript ================================================== --{amp}gt; {amp}lt;!-- Placed at the end of the document so the pages load faster --{amp}gt; {amp}lt;script{amp}gt; function editUnit() { showEditUnitBlock(); } function showEditUnitBlock() { $('#editUnitBlock').show(); // $('#unitAmenitiesLoading').floatit({ // limiter: 'footer', // preserve_width: true, // top_spacing: 40, // bottom_spacing: 10, // recalculate: true // }); $('#floorStackTable').addClass("floorStackColSmall").removeClass("floorStackColLarge"); } function hideEditUnitBlock() { $('#editUnitBlock').hide(); $('#floorStackTable').addClass("floorStackColLarge").removeClass("floorStackColSmall"); } {amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="jquery.floatit.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

После просмотра эффекта прокрутки по ссылке Pin jQuery, которую вы указали во втором обновлении, я думаю, что вы ищете нечто похожее на более старую проблему, с которой я столкнулся в проекте.

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

HTML

 {amp}lt;div class="main"{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;div class="article"{amp}gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel turpis in lorem lobortis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id vestibulum velit, ut consequat odio. Curabitur non erat velit. Pellentesque dolor libero, auctor id scelerisque nec, sollicitudin quis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis risus eu ligula aliquam, quis vestibulum nisi rhoncus. Morbi condimentum consectetur libero sit amet semper. Suspendisse potenti. Fusce pellentesque massa sed felis consectetur aliquam. Vestibulum dolor mi, mattis gravida iaculis nec, volutpat sit amet odio. Cras auctor mauris nibh, et vestibulum velit placerat at. Sed non lacus at sapien euismod sollicitudin. Cras accumsan condimentum gravida. Integer eget sagittis ligula. Cras ullamcorper interdum augue, non blandit augue rutrum in. Donec varius dolor magna, sollicitudin scelerisque odio tempor at. Suspendisse potenti. Donec in sollicitudin lorem, eu laoreet diam. Aenean non tincidunt risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a massa quis sem mollis lacinia at nec mi. Nunc vulputate orci sed tincidunt mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Javascript

 const scrollTheSticker = (stickers, scroll_distance, top) ={amp}gt; { if (stickers.length {amp}gt; 0) { let currentSticker = stickers.shift(); let currentScrollDistance = scroll_distance.shift(); let currentTopOffset = top.shift(); $(window).scroll(() ={amp}gt; { if ($(window).scrollTop() {amp}gt;= currentTopOffset {amp}amp;{amp}amp; $(window).scrollTop() {amp}lt;= (currentTopOffset   currentScrollDistance)) { $(currentSticker).css('position', 'fixed'); $(currentSticker).css('top', 10); //$(currentSticker).offset({top:currentTopOffset,left:$(this).offset().left}); } else { $(currentSticker).css('position', 'absolute'); $(currentSticker).css('top', currentTopOffset); } scrollTheSticker(stickers, scroll_distance, top); }); } } $(".article").css('border', '1px solid #000'); $(".article").css('width', 250); $(".article").css('margin', 10); $(".article").css('padding', 5); $(".article").css('text-align', 'justify'); var width = []; var height = []; var top = []; var left = []; $(".article").each((i, el) ={amp}gt; { width.push($(el).width()); height.push($(el).height()); top.push($(el).offset().top); left.push($(el).offset().left); }); var allarticles = $('.main').find('.article'); var n = allarticles.length; var scroll_distance = []; for (i = 0; i {amp}lt; n; i  ) { $(".main").append("{amp}lt;div class='stickem' id='sticker"   i   "'{amp}gt;This is side "   i   "{amp}lt;/div{amp}gt;"); $('.stickem').width(50); $('.stickem').height(50); $('.stickem').css('border', '1px solid #ccc'); $('.stickem').css('position', 'absolute'); $('.stickem').css('padding', 3); $('#sticker'   i).offset({ top: top[i], left: (width[i]   left[i]   20) }); scroll_distance.push(height[i] - $("#sticker"   i).height()); } var stickers = []; $('.stickem').each((i, el) ={amp}gt; { stickers.push($(el)); }); scrollTheSticker(stickers, scroll_distance, top); 

Смотрите результат в этой скрипке

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

https://jsfiddle.net/htbLm8rw/