我正在尝试模拟此页面上的“参与。参与。连接”小部件：https://themeworks.com/。基本上，该小部件保持设置在页面底部，直到用户滚动，然后将其自身停在“经历塑造我们”的正上方。文字。
我目前正在 https://williamh117.sg-host.com/ 创建类似的小部件。我正在努力寻找一种方法，让 #widget / #unanchored 元素在滚动到“.xp”时“停止”，该类包含在“经历塑造我们”中。元素。
这是我当前的 JavaScript：
window.addEventListener('scroll', function() {
var widget = document.getElementById('widget');
var xpElement = document.querySelector('.xp');
var widgetHeight = widget.offsetHeight;
var xpPosition = xpElement.getBoundingClientRect().top;
var windowHeight = window.innerHeight;
var distance = xpPosition - windowHeight + widgetHeight;
if (distance <= 0) {
// If the widget encounters the '.xp' element, un-anchor it and let it scroll with the page content
widget.classList.add('unanchored');
} else {
// If the widget is still anchored, position it fixed at the bottom of the viewport
widget.classList.remove('unanchored');
}
// Set the height of .xp element dynamically
xpElement.style.setProperty('--xp-height', widgetHeight + 'px'); // Set xpHeight to widgetHeight
});
这是我的 HTML：
<h3 id="widget" class="wp-block-heading has-text-align-center frontpage ticss-f97cde6c has-white-color has-text-color has-background" style="background-color:#00000087;font-size:39px">Engage. Involve. Connect.<br><span class="text frontpage2" style="font-weight: 200 !important;">We fuse Art + Engineering to create world-class experiences.</span><br><a href="https://williamh117.sg-host.com/#spacestop"><i class="arrow down"></i></a></h3>
这是我的CSS：
.unanchored {
position: fixed !important; /* Change position to fixed */
bottom: 300px !important;
top: calc(100% - var(--widget-height) - 30px); /* Adjust this value to set the desired distance from .xp */
left: 0 !important;
margin-bottom:0px !important;
}
.xp {
--widget-height: 30px; /* Adjust this value to match the height of your widget */
position: relative; /* Keep position relative */
}
#widget {
position: fixed;
bottom: 0;
left: 0;
background-color: #f0f0f0;
width: 100%;
text-align: center;
transition: bottom 0.3s ease-in-out;
z-index:1000 !important;
scroll-behavior: smooth !important;
}
提前感谢您的任何建议。
我猜你想要类似的功能。检查codePin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner {
width: 100%;
height: 100vh; /* Note */
background-color: #098;
}
.widget {
position: relative; /* Note */
z-index: 9;
top: -200px; /* Widge Height */
width: 100%;
height: 200px;
background-color: #0005;
display: grid;
place-content: center;
color: #fff;
}
.content {
position: relative; /* Note */
margin-top: -200px; /* Widge Height */
width: 100%;
height: 1000px;
background-color: #000;
padding-top: 200px;
color: #fff;
}
</style>
</head>
<body>
<section class="banner"></section>
<section class="widget">
<h2>Widget Content</h2>
</section>
<section class="content">
<div class="children">
<h1>This is Title</h1>
</div>
</section>
<script>
function map_range(value, input1Start, input1End, input2Start, input2End) {
const normalizedValue = (value - input1Start) / (input1End - input1Start);
return input2Start + normalizedValue * (input2End - input2Start);
}
window.addEventListener('scroll', function() {
const wantedHeightToEnd = window.innerHeight * 0.5; // want to end animation at middle of the screen
if (window.scrollY < wantedHeightToEnd) {
const value = map_range(window.scrollY, 0, wantedHeightToEnd, -200 /* Widge Height */, 0);
document.querySelector(".widget").style.top = value + px;
}
});
</script>
</body>
</html>
注意到的横幅、小部件和下一部分位于同一级别。