jquery.simple-scroll-follow

HTML

<aside>Element to follow</aside>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.simple-scroll-follow.min.js"></script>

CSS

aside {
  position: absolute;
}

JavaScript

$('aside').simpleScrollFollow();

• position: absolute is required.

  追尾する要素にはposition: absoluteが必須です。

• It is not required, but for preventing a screen flickers on Google Chrome, the following is recommended.

  必須ではありませんが、Google Chromeで追尾要素がちらつく現象を防ぐため、下記の設定をお勧めします。

  CSS

  body {
    background: url(null) fixed;
  }
  

HTML

<div>
  <article> ... </article>
  <aside> ... </aside>
</div>

JavaScript

$('aside').simpleScrollFollow({
  limit_elem: 'article'
});

If limit_elem is empty, it will be set to 'body'.

limit_elemを指定しない場合は、下限はbody要素の下端となります。

CSS

/* for PC */
@media screen and (min-width:992px) {
  aside {
    width: 300px;
    position: absolute;
    top: 0px;
    left: 500px;
  }
}

/* for Smart Phone */
@media screen and (max-width:991px) {
  aside {
    width: 600px;
    position: static;
    top: auto;
    left: auto;
  }
}

JavaScript

$('aside').simpleScrollFollow({
  min_width: 992 // Integer. Don't add "px".
});

$('#enabled').simpleScrollFollow({
  enabled: true
});
$('#disabled').simpleScrollFollow({
  enabled: false
});

Since: v3.1.0

If you use fixed menu such as Bootstrap4 .navbar .fixed-top, the options below will help you.

Bootstrap4 .navbar .fixed-topのような固定メニューに隠れないようにするため、下記のオプションを指定してください。

$('aside').simpleScrollFollow({
  upper_side: '#menu-fixed-top',
  lower_side: '#menu-fixed-bottom'
});

Since: v3.0.0

Set the method name to the first argument.
The rest argument is for that method.

第1引数にメソッド名を文字列で指定します。
第2引数以降はそのメソッドの引数になります。

// apply plugin firstly
$('aside').simpleScrollFollow();

$('#toggle_scroll').click(function() {
  if ($(this).text() == 'click to disable scroll') {
    $('aside').simpleScrollFollow('setEnabled', false);
    $(this).text('click to enable scroll');
  } else {
    $('aside').simpleScrollFollow('setEnabled', true);
    $(this).text('click to disable scroll');
  }
});

This plugin is also used in current page.

なお、このページでもこのプラグインを利用しています。