position プロパティ

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定する。 top, right, bottom, left の各プロパティが、配置された要素の最終的な位置を決定する。

• position: static;
  要素は文書の通常のフローに従って配置される
• position: relative;
  要素は文書の通常のフローに従って配置される
• position: absolute;
  要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されない。最終的な位置は top, right, bottom, left の値によって決定される。
• position: fixed;
  要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されない。最終的な位置は top, right, bottom, left の値によって決定される。
• position: sticky;
  要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置される。

scroll-behavior: smooth;

CSS に次の1行を追加する。

html {scroll-behavior: smooth;}

smooth-scroll.js

Download　ZIP

jQuery を CDN(Content Delivery Network)で読み込んで、次にダウンロードしたファイルを指定する場合、</body> 直前に以下を記述する。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/smooth-scroll.min.js" type="text/javascript"></script>

続いて次のスクリプトを記述する。

<script>
  var scroll = new SmoothScroll('a[href*="#"]');
</script>

position: sticky; と position: fixed; の違い

• position: fixed; は位置の基準は親要素ではなく「ウィンドウ全体」だ。top: 0 と指定すれば画面の最上部に表示される。
• position: sticky; の場合、position: sticky; が指定をされた要素がスティッキーアイテムとなり、スティッキーアイテムを囲う親要素のことをスティッキーコンテナという。スティッキーコンテナに特別な指定は必要は無い。position: sticky; を指定するとその親要素が自動的にスティッキーコンテナとなる。そして、スティッキーアイテムはスティッキーコンテナ内でしかフロートすることが出来ない。

タップするとマーキングの色を変える方法

html

<ul>
  <li class="sign"> <i class="fas fa-angle-right"></i>&nbsp;<a href="#" target="_self">sample</li>
</ul>

</body> 直前に次のスクリプトを記述する。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$('.sign').on('click', function(){
  $(this).toggleClass('isActive');
})
</script>

CSS に次を追加する。

.sign{
  border-radius: 8px;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: left;
  color: #333;
  cursor: pointer;
}
.isActive{
  font-weight: 300;
  color: red!important;
}