Advertisement
Guest User

Untitled

a guest
Jul 23rd, 2019
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.11 KB | None | 0 0
  1. <style>
  2. .sidebar{float: left; width: 360px; max-width: 100%;margin-top:97px; position: relative; background:#efefef;}
  3. .sidebar-inner{width: 360px; position: absolute; top: auto;}
  4. .sidebar-inner.fixed{position: fixed !important; top: 92px; bottom: auto;}
  5. </style>
  6.  
  7. <!-- Html structure -->
  8. <div class="common-wrap clear">
  9. <div class="content-wrap">
  10. <h2>Content title</h2>
  11. <p>Content description</p>
  12. </div>
  13. <aside class="sidebar">
  14. <div class="sidebar-inner">
  15. <h3>Sidebar content</h3>
  16. </div>
  17. </div>
  18. </div>
  19.  
  20. <section class="after-sidebar">
  21. <h2>Implementation & Consulting</h2>
  22. <p><strong>Create better documents and better customer experiences faster</strong>Leverage GhostDraft’s professional services for rapid implementation, getting your product to market quicker than ever.</p>
  23. </section>
  24. <!-- //End Html structure -->
  25.  
  26.  
  27.  
  28.  
  29.  
  30. <!-- jQuery function for stiky sidebar -->
  31. <javascript type="text/javascript">
  32. (function($){
  33. $(function(){
  34. if($(".sidebar").length){
  35. var top = $('.sidebar-inner').offset().top - parseFloat($('.sidebar-inner').css('marginTop').replace(/auto/, 0));
  36. var footTop = $('.after-sidebar').offset().top - parseFloat($('.after-sidebar').css('marginTop').replace(/auto/, 0));
  37.  
  38. var maxY = footTop - $('.sidebar-inner').outerHeight();
  39.  
  40. $(window).scroll(function(evt) {
  41. var y = $(this).scrollTop();
  42. if (y > top - 92) {
  43.  
  44. //Quand scroll, ajoute une classe ".fixed" et supprime le Css existant
  45. if (y < maxY) {
  46. $('.sidebar-inner').addClass('fixed').css({
  47. top: 92
  48. });
  49. } else {
  50.  
  51. //Quand la sidebar arrive au footer, supprime la classe "fixed" précèdement ajouté
  52. $('.sidebar-inner').removeClass('fixed').css({
  53. top: (maxY - top) + 'px'
  54. });
  55. }
  56. } else {
  57. $('.sidebar-inner').removeClass('fixed');
  58. }
  59. });
  60. }
  61. })
  62. })
  63. </javascript>
  64. <!-- //End jQuery function for stiky sidebar -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement