sda-utilities的trackProgress实现滚动网页首屏粘性置顶效果代码-html代码-BFW代码库

代码语言：html

代码描述：sda-utilities的trackProgress实现滚动网页首屏粘性置顶效果代码。

代码标签： sda-utilities trackProgress 滚动网页首屏粘性置顶

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@layer scrollsnapping {
	html {
		scroll-snap-type: y mandatory;
		
		--card-large: 0; /* Value gets set via JS */
		--card-small: 0; /* Value gets set via JS */
	}

	.card::before, .tracks::before {
		content: "";
		pointer-events: none;
		z-index: -1;
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		scroll-snap-align: start;
		z-index: 10;
	}

	.card::before {
		height: var(--card-large);
	}

	.tracks {
		position: relative;
	}
	.tracks::before {
		scroll-margin-top: var(--card-small);
		top: var(--card-large);
		height: calc(100% - var(--card-large));
	}
}

@layer viewtransitions {
	/* Configure the durations.

	   The idea here is that the card itself runs for a certain duration,
	   but elements in that card only for a certain part of that entire duration.
	   To achieve this, the durations and delays are expressed as fractions, which
	   are then used in a calcuation to get the actual duration in seconds.
	*/
	::view-transition {
		--vt-base-duration: 1s;
		
		--vt-description-duration: 0.5;
		--vt-description-delay: 0;
		
		--vt-moremeta-duration: 0.65;
		--vt-moremeta-delay: 0.2;
		
		--vt-title-duration: 0.6;
		--vt-title-delay: 0.2;
		
		--vt-meta-duration: 0.5;
		--vt-meta-delay: 0.3;
	}
	
	/* Apply base duration to all + make sure they are linear */
	::view-transition-group(*) {
		animation-duration: var(--vt-base-duration);
		animation-timing-function: linear;
	}
	
	/* Also inherit the delay and easing from the group onto the child pseudos */
	::view-transition-image-pair(*),
	::view-transition-new(*),
	::view-transition-old(*) {
		animation-delay: inherit;
		animation-timing-function: inherit;
	}
	
	/* Allow cursor to send events to underlying page while a VT is running */
	::view-transition {
		pointer-events: none;
	}
	
	/* Some keyframes to use */
	@keyframes slide-up { to { translate: 0 -100%; }}
	@keyframes slide-down { from { translate: 0 -100%; }}
	@keyframes fade-out { to { opacity: 0; }}
	@keyframes fade-in { from { opacity: 0; }}
	
	/* Capture all these individual elements instead. Also, don’t capture the root. */
	/* Note: we don’t capture the tracklist in this version! */
	:root {
		view-transition-name: none;
	}
	.card {
		view-transition-name: card;
	}
	.meta {
		view-transition-name: meta;
	}
	.title {
		view-transition-name: title;
	}
	.moremeta {
		view-transition-name: moremeta;
	}
	.description {
		view-transition-name: description;
	}
	.cover {
		view-transition-name: cover;
	}
	
	/* The card itself should just shrink, not fade */
	::view-transition-group(card) {
		overflow: clip;
	}
	::view-transition-new(card),
	::view-transition-old(card) {
		animation-name: none;
	}
	
	/* The title and moremeta remain the same. Therefore, don’t fade but immediately use the new snapshot */
	::view-transition-new(title),
	::view-transition-new(moremeta) {
		animation-name: none;
	}
	::view-transition-old(title),
	::view-transition-old(moremeta)  {
		display: none;
	}
	
	/* Slide and fade description. */
	::view-transition-old(description):only-child {
		animation-duration: calc(var(--vt-base-duration) * var(--vt-description-duration));
		animation-delay: calc(var(--vt-base-duration) * var(--vt-description-delay));
		animation-name: slide-up, fade-out;
	}
	::view-transition-new(description):only-child {
		animation-duration: calc(var(--vt-base-duration) * var(--vt-description-duration));
		animation-delay: calc(var(--vt-base-duration) * (1 - (var(--vt-description-delay) + var(--vt-description-duration))));
		animation-name: slide-down, fade-in;
	}
	
	/* Set timing for various components */
	::view-transition-group(moremeta) {
		animation-duration: calc(var(--vt-base-duration) * var(--vt-moremeta-duration));
		animation-delay: calc(var(--vt-base-duration) * var(--vt-moremeta-delay));
	}
	:root:not(:has(div.small))::view-transition-group(moremeta) {
		animation-delay: calc(var(--vt-base-duration) * (1 - (var(--vt-moremeta-delay) + var(--vt-moremeta-duration))));
	}
	::view-transition-group(title) {
		animation-duration: calc(var(--vt-base-duration) * var(--vt-title-duration));
		animation-delay: calc(var(--vt-base-durat.........完整代码请登录后点击上方下载按钮下载查看