添加粘性边栏

Question

I'm trying to use sticky sidebar with theiaStickySidebar from Github projects. As it described in above link, this should be an easy work. I use below HTML construction:

<aside class="sidebar">
 <div class="theiaStickySidebar">
 ...
 </div>
</aside>

This all these scripts need to work.

And also using scripts mentioned at Github page as below:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.content, .sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

But this doesn't work currectly.

Have I done something wrong in this process?

Answer 1

Jquery selector seems wrong. Use .ssidebar or theiaStickySidebar depending on which one you want as the sidebar.

eg.

<script type="text/javascript">
  jQuery(document).ready(function() {
     jQuery('.content, .ssidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>

Answer 2

I just didn't delete extra class .content . For:

<aside class="sidebar">
 <div class="theiaStickySidebar">
 ...
 </div>
</aside>

Must use:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.sidebar').theiaStickySidebar({
      // Settings
      additionalMarginTop: 30
    });
  });
</script>