LoginSignup
@yurakurage20 (くらげ)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

スクロールすると指定の位置で止まる固定ボタンの実装

Q&A

JavaScriptes6

解決したいこと

スクロールすると指定の位置で止まる固定ボタンの実装

jqueryを使わずに表題の件を実装したいと考えております。
生のjavascriptを触り始めたばかりですので優しくご教授いただけると幸いです…

該当するソースコード

const btn = document.querySelector('.btn');
let btn_height = btn.offsetHeight;
let rect = btn.getBoundingClientRect();
let position = rect.top + btn_height - window.innerHeight;

if( position < window.pageYOffset) {
 btn.classList.add("fixed");
} else {
 btn.classList.remove("fixed");

自分で試したこと

PC時は上記の記述できれいに止まるのですがスマホになると少し早くクラスが外されてしまいます。
考え方がそもそも間違っているのでしょうか？

参考サイトなどでもいいので少しでもヒント頂けると幸いです。

0 likes

2Answer

il9437
@il9437

ソースがすべて提示されているわけではないので実現したい動作とは異なるかもしれませんが、CSSでpositionにstickyを指定する方法では駄目でしょうか。

sample.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='user-scalable=no,width=device-width,initial-scale=1'>
<title>sticky test</title>
<style>
    .btn {
        position: sticky;
        top: 0px;
    }
    button {
        height: 30px;
        width: 120px;
        font-size: 14px;
        border-radius: 2px;
        background-color: #eee;
        border: 1px gray solid;
    }
    .dummy {
        width: 100%;
        height: 600px;
        border: 1px red solid;
        margin: 10px 0 10px 0;
    }
</style>
</head>
<body>
    <div>
        <div class='dummy'>高さ確保ダミー</div>
    </div>

    <div>
        <div class='btn'>
            <button>ボタン1</button>
        </div>
        <div class='dummy'>高さ確保ダミー</div>
    </div>

    <div>
        <div class='btn'>
            <button>ボタン2</button>
        </div>
        <div class='dummy'>高さ確保ダミー</div>
    </div>

    <div>
        <div class='btn'>
            <button>ボタン3</button>
        </div>
        <div class='dummy'>高さ確保ダミー</div>
        <div class='dummy'>高さ確保ダミー</div>
    </div>
</body>
</html>
1Like

Comments

  1. @yurakurage20

    Questioner

    回答ありがとうございます!!!

    stickyの発想はなかったです！
    stickyで想像通りの動きが出来ました!!
yurakurage20
@yurakurage20

解決したコード

sample.html

<!DOCTYPE html>
<html lang='ja'>
<body>

----------------
　ページ内容
----------------

<div class="fixed-btn">
	<a href="">
		<img src="/img/fixed_btn.png">
	</a>
</div>


</body>
</html>
fixed.css
.fixed-btn {
  	text-align: right;
}
.fixed-btn.sticky {
    animation: fadeIn 1s;
    position: -webkit-sticky;
    position: sticky;
    bottom: 15px;
}
@keyframes fadeIn {
 	from {opacity: 0;}
  	to {opacity: 1;}
}
fixed.js
const fixed_btn = document.querySelector('.fixed-btn');
const mv = document.querySelector('.mv');
let mv_height = mv.offsetHeight;

window.addEventListener('scroll', function(){   
    if( mv_height < window.pageYOffset ) {//mvから下ボタン表示
      fixed_btn.classList.add("sticky");
    } else {//mvより上で非表示
      fixed_btn.classList.remove("sticky");
    }
});
0Like

Your answer might help someone💌

LoginSign Up