所以這是我創建的一個簡單的小提琴（http://jsfiddle.net/t1xywroc/2/）來向您展示我試圖復制的動畫。我對 Javascript/Jquery 還很陌生，并且只接觸 HTML 和 CSS 幾個月。關于我的動畫的問題是（據我所知）沒有從絕對位置到固定位置的轉換，我相信這會在觸發動畫（或轉換，如果你愿意的話）后立即導致小跳躍。第二個問題是，::before 元素的內容也無法轉換。我如何使用 jQuery 修復這些問題？我試圖通過主要使用 CSS 來讓它工作，但我不斷遇到新問題。我想使用 JavaScript 是不可避免的，這就是我需要幫助的地方。我真的很感激。注意：不是母語人士。超文本標記語言<div?class="section">
??<div?class="button">
??</div></div>CSSCSS.section {? height: 2000px;? width: auto;}.button {? position: absolute;? transform: translateX(50%);? right: 50%;? display: inline-block;? color: white;? line-height: 60px;? height: 60px;? width: auto;? padding-left: 25px;? padding-right: 25px;? background-color: blue;? border-radius: 25px;? vertical-align: middle;? top: 15rem;}.button::before{? content: 'Button Text';}.floating {? ? padding-left: 0px;? ? padding-right: 0px;? ? position: fixed;? ? right: 15px;? ? top: calc(100vh - 120px);? ? transform: none;? ? height: 80px;? ? width: 80px;? ? transition: all 1.5s ease-in-out;? ? background-color: red !important;? ? border: none;? ? border-radius: 50%;? ? justify-content: center;? ? text-align: center;}.floating::before{? content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");}JS$(document).ready(function() {$(window).on('scroll', function() {? ?if ($(window).width() <= 768) {? ? ? var scrollTop = $(this).scrollTop();? ? ? $('.button').each(function() {? ? ? ? ? var topDistance = $(this).offset().top;? ? ? ? ? if ((topDistance - 30) < scrollTop) {? ? ? ? ? ? $(this).addClass('floating');? ? ? ? ? // Haven't put much thought into this part yet? ? ? ? ? } else if ((topDistance - 30) >= scrollTop){? ? ? ? ? }? ? ? ? });? ? }});});
卡在嘗試復制某個 CSS 轉換（向下滾動時移動到頁面底角并得到修復的 CTA 按鈕）
縹緲止盈
2023-11-12 14:45:29
