Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- .sidebar{float: left; width: 360px; max-width: 100%;margin-top:97px; position: relative; background:#efefef;}
- .sidebar-inner{width: 360px; position: absolute; top: auto;}
- .sidebar-inner.fixed{position: fixed !important; top: 92px; bottom: auto;}
- </style>
- <!-- Html structure -->
- <div class="common-wrap clear">
- <div class="content-wrap">
- <h2>Content title</h2>
- <p>Content description</p>
- </div>
- <aside class="sidebar">
- <div class="sidebar-inner">
- <h3>Sidebar content</h3>
- </div>
- </div>
- </div>
- <section class="after-sidebar">
- <h2>Implementation & Consulting</h2>
- <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>
- </section>
- <!-- //End Html structure -->
- <!-- jQuery function for stiky sidebar -->
- <javascript type="text/javascript">
- (function($){
- $(function(){
- if($(".sidebar").length){
- var top = $('.sidebar-inner').offset().top - parseFloat($('.sidebar-inner').css('marginTop').replace(/auto/, 0));
- var footTop = $('.after-sidebar').offset().top - parseFloat($('.after-sidebar').css('marginTop').replace(/auto/, 0));
- var maxY = footTop - $('.sidebar-inner').outerHeight();
- $(window).scroll(function(evt) {
- var y = $(this).scrollTop();
- if (y > top - 92) {
- //Quand scroll, ajoute une classe ".fixed" et supprime le Css existant
- if (y < maxY) {
- $('.sidebar-inner').addClass('fixed').css({
- top: 92
- });
- } else {
- //Quand la sidebar arrive au footer, supprime la classe "fixed" précèdement ajouté
- $('.sidebar-inner').removeClass('fixed').css({
- top: (maxY - top) + 'px'
- });
- }
- } else {
- $('.sidebar-inner').removeClass('fixed');
- }
- });
- }
- })
- })
- </javascript>
- <!-- //End jQuery function for stiky sidebar -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement