Last active
October 16, 2020 16:21
-
-
Save adriano66/ae79e9d6ebabdba0803db60d8fd2f2b9 to your computer and use it in GitHub Desktop.
Stick between
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin - https://jsbin.com/sogovosemo/edit?html,output</title> | |
| </head> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| height: 1200px; | |
| background: #ccc; | |
| margin-top: 200px; | |
| } | |
| #elp { | |
| position: relative; | |
| min-height: 300px; | |
| border: 1px solid red; | |
| background: gold; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #el { | |
| width: 80%; | |
| position: relative; | |
| display: block; | |
| height: 50px; | |
| border: 1px solid blue; | |
| background: #fff; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <div id="elp"> | |
| <div id="el">test</div> | |
| </div> | |
| <script> | |
| var $el = $('#el'); | |
| var $parent = $('#elp'); | |
| var startingElTop = $el.get(0).getBoundingClientRect().top; | |
| var startingParentTop = $parent.get(0).getBoundingClientRect().top; | |
| var elHeight = $el.get(0).getBoundingClientRect().height; | |
| var parentHeight = $parent.get(0).getBoundingClientRect().height; | |
| var startingElStop = startingParentTop + parentHeight - elHeight; | |
| var maxFromTop = startingElTop - startingParentTop; | |
| document.addEventListener('scroll', function(){ | |
| console.log( | |
| startingElTop, | |
| startingElStop, | |
| elHeight, | |
| maxFromTop, | |
| window.scrollY | |
| ); | |
| if(window.scrollY >= startingElTop && window.scrollY <= startingElStop) | |
| { | |
| var topVal = Math.max(window.scrollY - startingElTop, 0); | |
| var opacity = 1 - topVal / maxFromTop; | |
| $el.css({ | |
| top: topVal, | |
| opacity: opacity.toFixed(2) | |
| }) | |
| } | |
| }); | |
| //// fixed header | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const fixedHeader = document.getElementById('page-main-header'); | |
| const bannerTitle = document.querySelectorAll('.ts-page-banner__title')[0]; | |
| if (!fixedHeader || !bannerTitle) { | |
| return; | |
| } | |
| /* | |
| * We need a starting scroll position so we can calculate header position correctly | |
| * after user reloads the page and the browser is setting previous scroll position. | |
| * | |
| * All other variables using getBoundingClientRect() are also important to be set on the page load, | |
| * just before a scroll event occurs so elements positioning is correctly calculated. | |
| */ | |
| const opacityDegradeLevel = 0.7; | |
| const startingScrollPosition = window.scrollY; | |
| const bannerTitleWrapper = bannerTitle.parentNode; | |
| const scrollPositionPadding = fixedHeader.getBoundingClientRect().bottom; | |
| const startingElementTopPosition = bannerTitle.getBoundingClientRect().top + startingScrollPosition; | |
| const startingWrapperTopPosition = bannerTitleWrapper.getBoundingClientRect().top + startingScrollPosition; | |
| const bannerTitleWrapperHeight = bannerTitleWrapper.getBoundingClientRect().height; | |
| const bannerTitleBoxHeight = bannerTitle.getBoundingClientRect().height; | |
| const startingElementEndPosition = startingWrapperTopPosition + bannerTitleWrapperHeight - bannerTitleBoxHeight; | |
| const maxRelativePositionFromTop = startingElementTopPosition - startingWrapperTopPosition; | |
| const setScrollPosition = () => { | |
| const scrollPosition = window.scrollY + scrollPositionPadding; | |
| if ( | |
| scrollPosition >= startingElementTopPosition && | |
| scrollPosition <= startingElementEndPosition | |
| ) { | |
| const topVal = Math.max(scrollPosition - startingElementTopPosition, 0); | |
| const scrollProgress = topVal / maxRelativePositionFromTop; | |
| const opacity = 1 - scrollProgress * opacityDegradeLevel; | |
| bannerTitle.style.top = `${topVal}px`; | |
| bannerTitle.style.opacity = opacity.toFixed(2); | |
| } | |
| else if (scrollPosition < startingElementTopPosition) { | |
| bannerTitle.style.top = 0; | |
| bannerTitle.style.opacity = 1; | |
| } | |
| }; | |
| document.addEventListener('scroll', setScrollPosition); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment