初心者でもできる！jQueryで作る実用的な追従バナーの作り方！ソースコードあり！

<div id="sideBanner">
	<a class="sideBanner-line" href="#">
		<p>
			<span>LINE</span>
			<span>で予約</span>
		</p>
	</a>
	<a class="sideBanner-mail" href="#">
		<p>
			<span>メール　</span>
			<span>　で予約</span>
		</p>
	</a>
</div>

<div id="bottomBanner">
	<a href="#">
		無料体験に申し込む！
	</a>
</div>

#sideBanner {
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-200px);
    transition: all 0.5s ease-in-out;
}
#sideBanner.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
#sideBanner a {
    width: 60px;
    display: block;
    text-align: center;
    padding: 20px 0;
    border-radius: 0 10px 10px 0;
}
#sideBanner a p {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
#sideBanner a p span {
    display: block;
    color: #fff;
    font-size: 20px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
    letter-spacing: 0.1em;
}
.sideBanner-line {
    background-color: #00b900;
}
.sideBanner-mail {
    background-color: #fc8354;
}

.sideBanner-line::before,
.sideBanner-mail::before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 10px;
    background-size: contain;
    background-repeat: no-repeat;
}
.sideBanner-line::before {
    background-image: url(images/line.svg);
}
.sideBanner-mail::before {
    background-image: url(images/mail.svg);
}
#bottomBanner {
    width: 100%;
    max-width: 640px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 200px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}
#bottomBanner.active {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
}
#bottomBanner a {
    display: block;
    width: 100%;
    padding: 25px 0;
    font-size: 30px;
    color: #fff;
    background-color: rgba(252, 131, 84, 0.8);
}

jQuery(window).scroll(function () {
    let scroll = jQuery(window).scrollTop();
    if (scroll > 10) {
        jQuery("#sideBanner").addClass("active");
    } else {
        jQuery("#sideBanner").removeClass("active");
    }
	if(scroll > 1000) {
        jQuery("#bottomBanner").addClass("active");
    } else {
        jQuery("#bottomBanner").removeClass("active");
    }
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

let scroll = jQuery(window).scrollTop();
jQuery(window).scroll(function () {
    if (scroll > 10) {
        jQuery("#sideBanner").addClass("active");
    } else {
        jQuery("#sideBanner").removeClass("active");
    }
	if(scroll > 5000) {
        jQuery("#bottomBanner").addClass("active");
    } else {
        jQuery("#bottomBanner").removeClass("active");
    }
});