遅れて追従する固定ボタン

Question

前提・実現したいこと

ホームページにcssとjqueryで遅れて追従する固定ボタンを設置したいです。
場所はウインドウの下に固定したいです。
スクロールすると下付になるのですが、初期表示が上にくっついたままです。

該当のソースコード

<style> .Btn{position: relative;> </style> <div class="Btn"><a href="#">btn</a></div> <script> $(window).load(function() { var windowH = window.innerHeight; var startPosition = windowH - 30 + "px"; $(".Btn").offset({ top : startPosition}) var initPosition = $(".Btn").offset().top; $(window).scroll(function() { var scroll = $(document).scrollTop(); // 移動後ポジション var movePosition = initPosition + scroll + windowH - 30 + "px"; $(".dsbBtn").animate({ top : movePosition}, { duration : 600, queue : false}); }); }); </script>

試したこと

見よう見まねで移動後のポジションは下付にすることができました。
初期位置もoffsetを使って初期位置を設定して見たのですがうまく行きませんでした。

Answer 1

<style>.Btn{position: relative; display: none;}</style> <div class="Btn"><a href="#">btn</a></div> <script> $(window).load(function() { var windowH = window.innerHeight; var startPosition = windowH - 200 + "px"; $(".Btn").animate({ top : startPosition}).fadeIn('slow') var initPosition = $(".Btn").offset().top; $(window).scroll(function() { var scroll = $(document).scrollTop(); // 移動後ポジション var movePosition = initPosition + scroll + windowH - 200 + "px"; $(".Btn").animate({ top : movePosition}, { duration : 600, queue : false}); }); }); </script>

offsetではなくanimateだと動くので強引な感じですが、非表示のボタンを上から下に動かし、そこからフェードインさせる形で一応初期ビューで下に表示という形になりました。

なんだかごまかし的な感じですが…。

Answer 2

手元で試してみました。以下でいかがでしょうか?

.Btn { position: relative; }

$(function() {
  var initPosition = $(".Btn").offset().top;
  
  var windowH = window.innerHeight;
  var startPosition = initPosition + 0 + windowH - 30 + "px";
  $(".Btn").css({
    top: startPosition
  });
  
  $(window).scroll(function() {
    var scroll = $(document).scrollTop();
    
    // 移動後ポジション
    var movePosition = initPosition + scroll + windowH - 30 + "px";
    $(".Btn").animate({
      top: movePosition
    },
    {
      duration: 600,
      queue: false
    });
  });
});

Comments

[nikuo]

ありがとうございます。
試して見たのですが動きませんでした…。

[new1ro]

$(function() {
の部分を
$(window).load(function() {
に戻してみてください。

(こちらで試すときにloadだと動かなかったもので)

[new1ro]

↓こちらで、試してみています。
https://codepen.io/new1ro/pen/YzXgRPm

[nikuo]

できました！！cssに吐き出す形なのですね。
スマートに動く感じでイメージ通りです。
丁寧にありがとうございました！！！