Skip to content

Instantly share code, notes, and snippets.

@Laurian

Laurian/.block Secret

Last active April 21, 2017 14:39
Show Gist options
  • Save Laurian/627557520f103794d5aecf503607a09c to your computer and use it in GitHub Desktop.
Save Laurian/627557520f103794d5aecf503607a09c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
.block
license: mit
scrolling: yes
Raw
README.md

estevanmaito/sharect position absolute to body issue

Notice that the share widget does not scroll with the content in the middle paragraphs.

See estevanmaito/sharect#1

Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>overflow-y: scroll;</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 2em;
}
div + div {
margin-top: 1em;
}
#default {
overflow-y: scroll;
height: 200px;
}
#test {
overflow-y: scroll;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit hendrerit placerat. Vestibulum accumsan at quam facilisis fringilla. Mauris eu ligula sed ipsum ultricies lobortis. Etiam egestas turpis a arcu pellentesque sodales. Cras ultricies ornare lorem, ut pellentesque massa dignissim gravida. Vestibulum mattis consequat diam, sit amet posuere est scelerisque a. Etiam in nulla eget nisl tempus hendrerit at non leo. Etiam nec eros dapibus, congue massa et, lobortis erat. Fusce varius dolor ut arcu varius auctor.</p>
<div id="default">
<h4>Default faulty:</h4>
<p>Phasellus risus ante, ornare scelerisque pellentesque scelerisque, euismod eu quam. Morbi tristique turpis eget augue ultrices, nec laoreet felis vulputate. Mauris sollicitudin lacus vitae magna condimentum elementum. Nulla maximus ullamcorper purus. Sed in tortor eleifend, tempus ex nec, dignissim dui. Quisque ullamcorper imperdiet magna vitae vulputate. In vitae suscipit libero. Aenean quis justo ut lectus aliquet ullamcorper vitae sed ante. Nunc cursus vitae ligula in auctor. Mauris eget leo lobortis, ornare turpis a, lobortis justo. Pellentesque vitae justo dapibus libero faucibus pretium nec ut diam. Aliquam sem diam, bibendum et molestie sed, viverra sit amet neque. Pellentesque ullamcorper neque a nunc semper gravida. Proin porttitor non erat a molestie.</p>
<p>Vestibulum metus leo, tincidunt a aliquam ut, efficitur eu magna. Aenean vel tincidunt ante, non porta lorem. Nulla et nisi purus. Donec egestas odio purus, et maximus ante placerat at. Curabitur ac nibh elementum, porta nibh quis, molestie leo. Proin pulvinar vulputate urna, feugiat mollis lorem interdum sit amet. Mauris sollicitudin placerat elit vitae facilisis. Pellentesque ornare metus ut dapibus ultrices. Proin non condimentum mi. Nullam auctor nunc quis ante dictum gravida.</p>
<p>Integer sodales nunc quis interdum fringilla. Phasellus non facilisis orci. Sed placerat nunc et porta convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper mauris quis efficitur hendrerit. Proin malesuada dictum lectus, molestie mattis massa condimentum eget. Integer in pretium mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam rutrum ut nibh vel interdum. Suspendisse porttitor mauris tellus, et congue diam dapibus pharetra. Vestibulum magna odio, tempus quis mi vel, ullamcorper tristique est. Aliquam dictum justo nibh. Aenean tristique rhoncus dapibus. Donec accumsan dignissim arcu, at hendrerit nisl vehicula tempor. Aliquam scelerisque gravida nisl. Vestibulum mollis neque id pretium tincidunt.</p>
</div>
<div id="test">
<h4>Fix with postion relative / offset parent:</h4>
<p>Phasellus risus ante, ornare scelerisque pellentesque scelerisque, euismod eu quam. Morbi tristique turpis eget augue ultrices, nec laoreet felis vulputate. Mauris sollicitudin lacus vitae magna condimentum elementum. Nulla maximus ullamcorper purus. Sed in tortor eleifend, tempus ex nec, dignissim dui. Quisque ullamcorper imperdiet magna vitae vulputate. In vitae suscipit libero. Aenean quis justo ut lectus aliquet ullamcorper vitae sed ante. Nunc cursus vitae ligula in auctor. Mauris eget leo lobortis, ornare turpis a, lobortis justo. Pellentesque vitae justo dapibus libero faucibus pretium nec ut diam. Aliquam sem diam, bibendum et molestie sed, viverra sit amet neque. Pellentesque ullamcorper neque a nunc semper gravida. Proin porttitor non erat a molestie.</p>
<p>Vestibulum metus leo, tincidunt a aliquam ut, efficitur eu magna. Aenean vel tincidunt ante, non porta lorem. Nulla et nisi purus. Donec egestas odio purus, et maximus ante placerat at. Curabitur ac nibh elementum, porta nibh quis, molestie leo. Proin pulvinar vulputate urna, feugiat mollis lorem interdum sit amet. Mauris sollicitudin placerat elit vitae facilisis. Pellentesque ornare metus ut dapibus ultrices. Proin non condimentum mi. Nullam auctor nunc quis ante dictum gravida.</p>
<p>Integer sodales nunc quis interdum fringilla. Phasellus non facilisis orci. Sed placerat nunc et porta convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ullamcorper mauris quis efficitur hendrerit. Proin malesuada dictum lectus, molestie mattis massa condimentum eget. Integer in pretium mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam rutrum ut nibh vel interdum. Suspendisse porttitor mauris tellus, et congue diam dapibus pharetra. Vestibulum magna odio, tempus quis mi vel, ullamcorper tristique est. Aliquam dictum justo nibh. Aenean tristique rhoncus dapibus. Donec accumsan dignissim arcu, at hendrerit nisl vehicula tempor. Aliquam scelerisque gravida nisl. Vestibulum mollis neque id pretium tincidunt.</p>
</div>
<p>In accumsan ante a cursus viverra. Quisque hendrerit vehicula enim in viverra. Donec et dictum nulla. Nulla nulla orci, egestas a turpis a, maximus porta metus. Integer blandit sem quis commodo accumsan. Cras semper purus vitae eleifend ultricies. Fusce lobortis aliquet ex auctor iaculis. In congue, elit pellentesque aliquet euismod, risus quam semper turpis, vitae lobortis turpis lorem in ligula.</p>
<script src="https://hyperaudio.github.io/sharect/sharect.min.js"></script>
<!-- <script src="https://estevanmaito.github.io/sharect/sharect.min.js"></script> -->
<!-- <script src="sharect.min.js"></script> -->
<script>
var sharect = new Sharect();
sharect.config({
facebook: true,
twitter: true,
twitterUsername: '@gridinoc',
backgroundColor: '#9bab2f',
iconColor: '#fff'
}).init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment