ブートストラップでスクロール中の固定サイドバー

Question

サイドバーのボトムコンテンツが表示されているときに左サイドバーを修正し、フッターまでスクロールするときは固定しておきます。その後、サイドバーの上部が上になると、サイドバーがスクロールして固定されたままになります。 これにブートストラップ接尾語を使用できますか？ それは、まさにこの（左のサイドバーの挙動）のようなものです：http://www.spelbloggare.se/

私は任意の助けのために非常に感謝しています、私は、ここに私のコードのすべてをペーストするかどうかを知っている（それがそんなにある）が、私は、ヘッダーを持っているドントサイドバー、コンテンツ、フッターがあります。

Answer 1

この参照してください：ここで

$(document).ready(function() { 
 
    console.log("document ready!"); 
 

 
    var $sticky = $('.sticky'); 
 
    var $stickyrStopper = $('.sticky-stopper'); 
 
    if (!!$sticky.offset()) { // make sure ".sticky" element exists 
 

 
    var generalSidebarHeight = $sticky.innerHeight(); 
 
    var stickyTop = $sticky.offset().top; 
 
    var stickOffset = 0; 
 
    var stickyStopperPosition = $stickyrStopper.offset().top; 
 
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset; 
 
    var diff = stopPoint + stickOffset; 
 

 
    $(window).scroll(function(){ // scroll event 
 
     var windowTop = $(window).scrollTop(); // returns number 
 

 
     if (stopPoint < windowTop) { 
 
      $sticky.css({ position: 'absolute', top: diff }); 
 
     } else if (stickyTop < windowTop+stickOffset) { 
 
      $sticky.css({ position: 'fixed', top: stickOffset }); 
 
     } else { 
 
      $sticky.css({position: 'absolute', top: 'initial'}); 
 
     } 
 
    }); 
 

 
    } 
 
});

.container { 
 
    width: 1000px; 
 
    position: relative; 
 
} 
 

 
.header { 
 
    clear: both; 
 
    margin-bottom: 10px; 
 
    border: 1px solid #000000; 
 
    height: 90px; 
 
} 
 

 
.sidebar { 
 
    float: left; 
 
    width: 350px; 
 
    border: 1px solid #000000; 
 
} 
 

 
.content { 
 
    float: right; 
 
    width: 640px; 
 
    border: 1px solid #000000; 
 
    height: 800px; 
 
} 
 

 
.footer { 
 
    clear: both; 
 
    margin-top: 10px; 
 
    border: 1px solid #000000; 
 
    height: 820px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header"> 
 
    This is header 
 
    </div> 
 
    <div class="sidebar sticky"> 
 
    This is side bar 
 
    </div> 
 
    <div class="content"> 
 
    This is main content 
 
    </div> 
 
    <div class="footer"> 
 
    <div class="sticky-stopper"></div> 
 
    This is my footer 
 
    </div> 
 
</div>

Answer 2

は、あなたがそれを行うことができる方法の最小限の例です。この例ではjQueryが必要です。

$(function() { 
 
    var sidebar = $('.sidebar'); 
 
    var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top')); 
 

 
    $(window).scroll(function(event) { 
 
    var y = $(this).scrollTop(); 
 
    if (y >= top) { 
 
     sidebar.addClass('fixed'); 
 
    } else { 
 
     sidebar.removeClass('fixed'); 
 
    } 
 
    }); 
 
});

/* -- Needed things -- */ 
 
    /* top margin on sidebar */ 
 
    .sidebar, 
 
    .content { 
 
    margin-top: 20px; 
 
    } 
 
    /* fixed sidebar which will be added from JS */ 
 
    .fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    } 
 
    
 
/* -- Code below is only for example -- */ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 20px; 
 
} 
 

 
p { 
 
    padding: 5px; 
 
    margin: 0; 
 
} 
 

 
.nav { 
 
    width: 100%; 
 
    height: 20px; 
 
    border: green 2px solid; 
 
} 
 

 
.content { 
 
    width: 70%; 
 
    border: 2px solid green; 
 
    float: right; 
 
} 
 

 
.sidebar { 
 
    width: 100px; 
 
    height: 300px; 
 
    float: left; 
 
    border: 2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav">Navigation</div> 
 
<div class="sidebar">Sidebar</div> 
 
<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis 
 
    orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur 
 
    scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, 
 
    felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. 
 
    Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. 
 
    Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor 
 
    sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque 
 
    ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. 
 
    Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis 
 
    tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem 
 
    quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor 
 
    vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor sit amet, 
 
    consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum 
 
    dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. 
 
    Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis 
 
    tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem 
 
    quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor 
 
    vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. 
 

 
    </p> 
 
</div>