Advertisement
Guest User

Untitled

a guest
Sep 16th, 2019
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.80 KB | None | 0 0
  1. <style>
  2. .sticky {
  3. position: fixed;
  4. z-index: 1001;
  5. }
  6. .stop {
  7. position: relative;
  8. z-index: 1001;
  9. }
  10. </style>
  11.  
  12. <script>
  13. (function(){
  14. var a = document.querySelector('#aside'), b = null, P = 0;
  15. window.addEventListener('scroll', Ascroll, false);
  16. document.body.addEventListener('scroll', Ascroll, false);
  17. function Ascroll() {
  18. if (b == null) {
  19. var Sa = getComputedStyle(a, ''), s = '';
  20. for (var i = 0; i < Sa.length; i++) {
  21. if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
  22. s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
  23. }
  24. }
  25. b = document.createElement('div');
  26. b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
  27. a.insertBefore(b, a.firstChild);
  28. var l = a.childNodes.length;
  29. for (var i = 1; i < l; i++) {
  30. b.appendChild(a.childNodes[1]);
  31. }
  32. a.style.height = b.getBoundingClientRect().height + 'px';
  33. a.style.padding = '0';
  34. a.style.border = '0';
  35. }
  36. var Ra = a.getBoundingClientRect(),
  37. R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#msCart').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
  38. if ((Ra.top - P) <= 0) {
  39. if ((Ra.top - P) <= R) {
  40. b.className = 'stop';
  41. b.style.top = - R +'px';
  42. } else {
  43. b.className = 'sticky';
  44. b.style.top = P + 'px';
  45. }
  46. } else {
  47. b.className = '';
  48. b.style.top = '';
  49. }
  50. window.addEventListener('resize', function() {
  51. a.children[0].style.width = getComputedStyle(a, '').width
  52. }, false);
  53. }
  54. })()
  55. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement