Created
September 30, 2018 22:42
-
-
Save Driver86/1530ce6c0cd1b5c6afc00d36fcf543c8 to your computer and use it in GitHub Desktop.
If the height of the browser window is less than the height of the side column, then either the bottom or the top edge of the column will stick, otherwise only the top.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Sticky</title> | |
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
| <style> | |
| .top-0 { | |
| top: 0 !important; | |
| } | |
| .bottom-0 { | |
| bottom: 0 !important; | |
| } | |
| </style> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-4 d-flex"> | |
| <div class="sticky" style="height: 1200px; width: 100%; border: 8px dashed red;"> | |
| Aside links... | |
| </div> | |
| </div> | |
| <div class="col-8"> | |
| <div style="height: 3600px; border: 8px dashed gray;"> | |
| Content text... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> | |
| <script> | |
| 'use strict'; | |
| $(document).ready(function() { | |
| let $window = $(window); | |
| let stick = (function () { | |
| let $sticky = $('.sticky'); | |
| let $stickyParent = $sticky.parent(); | |
| let windowTopPrevious = 0; | |
| $stickyParent.addClass('align-items-start'); | |
| $sticky.addClass('position-sticky top-0'); | |
| return function () { | |
| let $windowHeight = $window.height(); | |
| let windowTop = $window.scrollTop(); | |
| let windowBottom = windowTop + $windowHeight; | |
| let stickyTop = $sticky.offset().top; | |
| let $stickyHeight = $sticky.outerHeight(); | |
| let stickyBottom = stickyTop + $stickyHeight; | |
| let stickyTopRelativeParent = $sticky.position().top; | |
| let stickyBottomRelativeParent = stickyTopRelativeParent + $stickyHeight; | |
| if ($windowHeight >= $stickyHeight) { | |
| if (!$sticky.hasClass('top-0')) { | |
| $stickyParent.removeClass('align-items-end').addClass('align-items-start'); | |
| $sticky.removeClass('bottom-0').addClass('top-0'); | |
| } | |
| } else if (windowTop > stickyTop || windowBottom < stickyBottom) { | |
| if (windowTop > windowTopPrevious) { | |
| if ($sticky.hasClass('top-0')) { | |
| $sticky.css('margin-top', stickyTopRelativeParent + 'px').removeClass('top-0'); | |
| } | |
| if (windowBottom > stickyBottom && !$sticky.hasClass('bottom-0')) { | |
| $stickyParent.removeClass('align-items-start').addClass('align-items-end'); | |
| $sticky.css('margin-top', '0').addClass('bottom-0'); | |
| } | |
| } else if (windowTop < windowTopPrevious) { | |
| if ($sticky.hasClass('bottom-0')) { | |
| $stickyParent.removeClass('align-items-end').addClass('align-items-start'); | |
| $sticky.css('margin-top', stickyTopRelativeParent + 'px').removeClass('align-self-end bottom-0'); | |
| } | |
| if (windowTop < stickyTop && !$sticky.hasClass('top-0')) { | |
| $sticky.css('margin-top', '0').addClass('top-0'); | |
| } | |
| } | |
| } | |
| windowTopPrevious = windowTop; | |
| } | |
| })(); | |
| if ($window.scrollTop() > 0) { | |
| stick(); | |
| } | |
| $window.on({ | |
| 'scroll': stick | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment