スクロール後、出現画像をある位置に固定したい

前提・実現したいこと

お世話になっています。

スクロールを必要とするサイト等ではよくあるとは思うのですが、クリックしたらページトップに移動する仕様のやつの応用でスクロールしたら出現する画像を出現してからある位置以降はに固定したいのですが上手くいかなくて困ってます。
これだけだと普通にposition: fixedで解決するのではと思われるかと思いますがしたい事が少し異なります。
上手く言葉では説明できないため、下記に理想の画像を添付しますので参考にして頂ければ幸いです。

発生している問題・エラーメッセージ

画像を固定出来ない

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>sample</title>
6  <meta content="text/css" http-equiv="Content-Style-Type">
7  <link href="css/実験.css" rel="stylesheet" type="text/css">
8  <script src="js/jquery.js" type="text/javascript" /></script>
9  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
10</head>
11
12<body>
13
14<div class="box">
15</div>
16
17<div class="pen">
18		<img src="img/pen.png" class="mate">
19<div>
20
21
22
23 <script type="text/javascript">
24 
25 $(function() {
26    var illustration = $('.pen');    
27    //スクロールが100に達したらボタン表示
28   $(window).scroll(function() {
29    if ($(this).scrollTop() > 50) {
30      illustration.stop().animate({
31        'left': '10px'
32      }, 50, 'linear');
33    } else {
34      illustration.stop().animate({
35        'left': '-100px'
36      }, 50, 'linear');
37    }
38  });
39  });
40  
41  </script>
42
43</body>
44
45</html>
46

css
1body{
2	height:1000px;
3	
4}
5
6.box{
7	width:100px;
8	height:100px;
9	background:#FF0000;
10	margin-top:550px;
11}
12
13.mate{
14	max-width: 100%;
15    height: auto;
16}
17
18.pen {
19    position: fixed;
20    bottom: 20px;
21    left: 10px;
22}
23

試したこと

・ネットでの検索
・.mate側にpositionの追加等

補足情報（FW/ツールのバージョンなど）

このコードは状況再現が出来るコードを簡易的に作ったものなのでコードの粗は目をつむって頂けると幸いです。
pen.png

何か不明点があれば指摘して頂ければ追記します。
申し訳ありませんが、お力をお借り出来れば幸いです。
宜しくお願い致します。

Lhankor_Mhy

2019/09/27 07:01

position: sticky はすでにお試しになりましたか？

mutsuki22

2019/09/27 07:56

>Lhankor_Mhyさん試してなかったので試しました。やりたい事はこういう事なんですが、それを行うと横からの出現が機能しなくなりました。横から出現を生かしたままって可能ですか？

Lhankor_Mhy

2019/09/27 08:05

ああ、なるほど、そういうことですか。試したわけではないですが、私なら、stickyなラッパを作ってその中で横から出現させる、とかするかもしれないですね。それならマージンでもいけるはず。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことですか？
サンプル

html
1<div class="box">
2<div class="pen">
3        <img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/4963575a499ed59e65c4a6c9f463fe93.png" class="mate">
4        </div>
5</div>

js
1   $(window).scroll(function() {
2    if ($(this).scrollTop() > 50) {
3      illustration.stop().animate({
4        'margin-left': '10px'
5      }, 50, 'linear');
6    } else {
7      illustration.stop().animate({
8        'margin-left': '-100px'
9      }, 50, 'linear');
10    }