smartSticky - Фиксация при прокрутке / Улучшение / Плагины Bootstrap

Версия: v2.7.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, WHMCS, PHP

Язык: Английский

Вес файла: 18.1 Kb

Уникальный ID: 5665

Посмотрели: 678 раз

Скачать бесплатно

Посетить Демо страница

Помощь: установка & настройка

Скачали бесплатно: 13 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: https://www.jqueryscript.net/other/smart-sticky.html

Информация: Пользователям

Информация: Правообладателям

Теги: smartSticky, Bootstrap, фиксация при прокрутке, jqueryscript, зафиксировать в топе, фиксация элемента, Plugin

Поделился: BootstrapТема

Добавлено: 2023-01-14 в 19:42

Метка: 1673715113

⇄ ⇅

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
 <script src="https://bootstraptema.ru/plugins/2023/smartsticky/jquery.smartSticky.js"></script>
 <link rel="stylesheet" href="https://bootstraptema.ru/plugins/2023/smartsticky/jquery.smartSticky.css">

<title>smartSticky & BootstrapTema</title>
</head>
<body class="m-2">
 <div class="container">
 <h2 class="mb-3">smartSticky & BootstrapTema</h2>
 <div class="row mb-2">
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-1">
 My sticky content 1 - default
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-2">
 My sticky content 2 - fixed bottom, visible when scrolling up, invisible when scrolling down
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-3">
 My sticky content 3 - toggling: fixed top when scrolling down, fixed bottom when scrolling up
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 </div>
 <div class="row jumbotron mb-2">
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-4">
 My sticky content 4 - row as container
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-5">
 My sticky content 5 - delayed
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <h5 class="sticky-smart-6">
 My sticky content 6 - visible above and under original position
 </h5>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 </div>
 <div class="row mb-2">
 <div class="col-md-6 col-lg-4">
 <table class="table table-dark table-hover">
 <thead class="sticky-smart-7 bg-dark p-0">
 <tr>
 <th scope="col">fixed</th>
 <th scope="col">table</th>
 <th scope="col">header</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 </tr>
 <tr>
 <td>d</td>
 <td>e</td>
 <td>f</td>
 </tr>
 <tr>
 <td>g</td>
 <td>h</td>
 <td>i</td>
 </tr>
 <tr>
 <td>j</td>
 <td>k</td>
 <td>l</td>
 </tr>
 <tr>
 <td>m</td>
 <td>n</td>
 <td>o</td>
 </tr>
 <tr>
 <td>p</td>
 <td>q</td>
 <td>r</td>
 </tr>
 <tr>
 <td>s</td>
 <td>t</td>
 <td>u</td>
 </tr>
 <tr>
 <td>v</td>
 <td>w</td>
 <td>x</td>
 </tr>
 <tr>
 <td>y</td>
 <td>z</td>
 <td>*</td>
 </tr>
 </tbody>
 </table>
 </div>

<div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-8 bg-dark text-light p-2">
 My sticky content 8 - custom background and position
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-9">
 My sticky content 9 - recognizing scroll direction
 </h5>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>
 </div>
 <div class="row jumbotron mb-2">
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-10">
 My sticky content 10 - fixed bottom only on mobile phones, resize window to see effect
 </h5>

</div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <div class="sticky-smart-11">
 <h5>My sticky content 11 - disable/enable on button click</h5>
 <button class="sticky-smart-disable btn btn-danger" style="display: none;">disable</button>
 <button class="sticky-smart-enable btn btn-success">enable</button>
 </div>

</div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <div class="sticky-smart-12">
 <h5>My sticky content 12 - hide on button click</h5>
 <button class="sticky-smart-hide btn btn-primary">hide</button>
 </div>

</div>
 </div>
 </div>
 <div class="row mb-2">
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-13">
 My sticky content 13 - immediately<br>
 content<br>
 content<br>
 content<br>
 content
 </h5>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div>
 <h5 class="sticky-smart-14">
 My sticky content 14 - immediately above<br>
 content<br>
 content<br>
 content<br>
 content
 </h5>
 </div>
 </div>
 </div>
 <div class="mb-2">
 <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-sticky-smart">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 </li>
 </ul>
 <form class="form-inline my-2 my-lg-0">
 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 </form>
 </div>
 </nav>

<h4 class="mt-3 w-100">Sticky navbar example</h4>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Etiam bibendum elit eget erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec quis nibh at felis congue commodo. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Vestibulum fermentum tortor id mi. Praesent vitae arcu tempor neque lacinia pretium. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. In rutrum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent id justo in neque elementum ultrices.</p>
 <p>Praesent in mauris eu tortor porttitor accumsan. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Integer lacinia. Etiam posuere lacus quis dolor. Etiam neque. Duis viverra diam non justo. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nullam at arcu a est sollicitudin euismod. Mauris elementum mauris vitae tortor. Nulla non lectus sed nisl molestie malesuada. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Cras elementum.</p>
 <p>In rutrum. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Donec vitae arcu. Curabitur vitae diam non enim vestibulum interdum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Ut tempus purus at lorem. Maecenas libero. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In enim a arcu imperdiet malesuada. Pellentesque pretium lectus id turpis.</p>
 <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam id dolor. Etiam dictum tincidunt diam. Maecenas sollicitudin. Pellentesque pretium lectus id turpis. Aliquam id dolor. Fusce aliquam vestibulum ipsum. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla est.</p>
 <p>Nullam sit amet magna in magna gravida vehicula. Etiam posuere lacus quis dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam bibendum elit eget erat. Integer malesuada. Nunc dapibus tortor vel mi dapibus sollicitudin. Quisque tincidunt scelerisque libero. Vivamus ac leo pretium faucibus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam ante.</p>
 </div>
 </div>

$('.sticky-smart-3').smartSticky({
 show: {
 fixed: 'toggle'
 }
 });

$('.sticky-smart-4').smartSticky({
 container: function (settingsManager) {
 return settingsManager.getElement().closest('.row');
 },
 css: {
 fixed: {
 left: function (settingsManager) {
 return settingsManager.getContainer().offset().left;
 },
 width: function (settingsManager) {
 return settingsManager.getContainer().outerWidth();
 }
 }
 }
 });

$('.sticky-smart-5').smartSticky({
 show: {
 delay: 400
 }
 });

$('.sticky-smart-6').smartSticky({
 show: {
 fixed: 'bottom',
 original: {
 above: true
 }
 }
 });

$('.sticky-smart-7').smartSticky({
 show: {
 immediately: true
 }
 });
 
 $.fn.smartSticky.positions['customToggle'] = function (positionManager) {
 if (positionManager.getScrollingManager().scrollingDown()) {
 return { top: 100 };
 }

return { bottom: 200 };
 };

$('.sticky-smart-8').smartSticky({
 show: {
 fixed: 'customToggle'
 }
 });

$('.sticky-smart-9').on('smartSticky.deactivate', function () {
 $(this).css('color', 'black');
 }).smartSticky({
 show: {
 fixed: 'bottom',
 scrolling: function (settingsManager, scrollingManager) {
 if (scrollingManager.scrollingDown()) {
 settingsManager.getElement().css('color', 'red');
 }
 else {
 settingsManager.getElement().css('color', 'green');
 }

return true;
 }
 }
 });

$('.sticky-smart-10').smartSticky({
 show: {
 fixed: function () {
 if ($(window).width() < 500) {
 return 'bottom';
 }
 }
 }
 });

var stickySmart11 = $('.sticky-smart-11');
 var stickySmart11BtnEnable = $('button.sticky-smart-enable', stickySmart11);
 var stickySmart11BtnDisable = $('button.sticky-smart-disable', stickySmart11);

stickySmart11.on('smartSticky.activate', function () {
 stickySmart11BtnDisable.show();
 stickySmart11BtnEnable.hide();
 }).on('smartSticky.deactivate', function () {
 stickySmart11BtnDisable.hide();
 stickySmart11BtnEnable.show();
 }).smartSticky().smartSticky('disable');

stickySmart11BtnDisable.on('click', function () {
 stickySmart11.smartSticky('disable');
 });

stickySmart11BtnEnable.on('click', function () {
 stickySmart11.smartSticky('enable');
 });

var stickySmart12 = $('.sticky-smart-12');
 var stickySmart12Btn = $('button.sticky-smart-hide', stickySmart12);

stickySmart12.on('smartSticky.activate', function () {
 stickySmart12Btn.show();
 }).on('smartSticky.deactivate', function () {
 stickySmart12Btn.hide();
 }).smartSticky();

stickySmart12Btn.on('click', function () {
 stickySmart12.smartSticky('hide');
 });

$('.navbar.navbar-sticky-smart').smartSticky({
 show: {
 fixed: function () {
 if ($(window).width() < 768) {
 return 'bottom';
 }
 },
 scrolling: function (_settingsManager, scrollingManager) {
 if ($(window).width() < 768) {
 return !scrollingManager.scrollingDown();
 }

return scrollingManager.scrollingDown();
 }
 }
 });

$('.sticky-smart-13').smartSticky({
 show: {
 immediately: true
 }
 });

$('.sticky-smart-14').smartSticky({
 show: {
 original: {
 above: true,
 under: false
 },
 fixed: 'bottom',
 immediately: true
 }
 });

});
 </script>
</body>
</html>

BootstrapTema

smartSticky - Фиксация при прокрутке

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0