【发布时间】：2022-01-04 22:07:03
【问题描述】：
您好，我想为手机制作这个导航栏，当用户向下滚动时它会剪掉文本，但我很困惑我该怎么做，因为如果我只是向上移动导航栏，它将首先开始剪掉我的图像有人可以告诉我如何解决这个问题这是我的代码（注意我使用tailwindcss）
代码：
<script>
//checks if on phone
let onPhone;
function checkIfOnPhone() {
let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
if (width < 426) {
onPhone = true;
} else {
onPhone = false;
}
}
checkIfOnPhone();
addEventListener("resize", checkIfOnPhone);
//user scroling page
let phoneNavbarFull;
document.addEventListener("scroll", scrollListener);
let topPxSize;
let scrollTop;
function scrollListener() {
scrollTop =
window.pageYOffset ||
(
document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop;
if (onPhone && scrollTop < 20) {
topPxSize = -scrollTop + "px";
} else {
topPxSize = "-20px";
}
console.log(scrollTop);
}
scrollListener();
</script>
<main>
{#if onPhone}
<nav class="navbar-background" style="--topPxSize: {topPxSize}">
<div class="navbar">
<ul class="flex justify-between">
<li />
<li>
<button class="flex flex-col items-center">
<img src="./imgs/Home_light.svg" alt="Home" />
<p class="nav-btn-mobile">Home</p>
</button>
</li>
<li>
<button class="flex flex-col items-center"
><img
src="./imgs/Desk_alt_light.svg"
alt="Portfolio"
/>
<p class="nav-btn-mobile">Portfolio</p></button
>
</li>
<li>
<button class="flex flex-col items-center"
><img src="./imgs/Phone_light.svg" alt="Contact" />
<p class="nav-btn-mobile">Contact</p></button
>
</li>
<li />
</ul>
</div>
</nav>
<div class="pb-60 mb-60" />
{:else}
<nav class="navbar-background">
<ul class="flex justify-between">
<li class="nav-btn"><span class="font-bold">LAY</span>CODE</li>
<ul class="flex">
<li class="nav-btn">Home</li>
<li class="nav-btn">Portfolio</li>
<li class="nav-btn">Contact</li>
</ul>
</ul>
</nav>
{/if}
</main>
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.navbar-background {
background-color: #000;
position: fixed;
top: var(--topPxSize);
width: 100%;
height: 45px;
z-index: 100;
}
.nav-btn {
@apply text-white mr-6;
}
.nav-btn-mobile {
@apply text-white text-sm text-center;
}
}
</style>
这是它的外观或多或少。
更新： 我用这段代码做了我想要的，但问题是如果屏幕变宽然后又变小，动画在这里停止工作是一个更新的代码。
代码：
<script>
//checks if on phone
let onPhone;
function checkIfOnPhone() {
let width = window.innerWidth > 0 ? window.innerWidth : screen.width;
if (width < 426) {
onPhone = true;
} else {
onPhone = false;
}
}
checkIfOnPhone();
addEventListener("resize", checkIfOnPhone);
//user scroling page
document.addEventListener("scroll", scrollListener);
let scrollTop;
function scrollListener() {
scrollTop =
window.pageYOffset ||
(
document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop;
}
scrollListener();
//playground zone
import { onMount } from "svelte";
let tracker, paragraphs;
onMount(() => {
sectionObserver.observe(tracker);
paragraphs = [...document.getElementsByTagName("p")];
});
const options = {
rootMargin: "0px 0px 0px 0px",
};
const sectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry);
if (entry.isIntersecting) {
paragraphs.forEach((p) => p.classList.remove("collapse"));
} else {
paragraphs.forEach((p) => p.classList.add("collapse"));
}
});
}, options);
</script>
<main>
{#if onPhone}
<nav>
<div id="ul-wrapper">
<ul class="navbar">
<li />
<li class="nav-btn-mobile">
<img src="./imgs/Home_light.svg" alt="Home" />
<p class="nav-btn-text">Home</p>
</li>
<li class="nav-btn-mobile">
<img src="./imgs/Desk_alt_light.svg" alt="Portfolio" />
<p class="nav-btn-text">Portfolio</p>
</li>
<li class="nav-btn-mobile">
<img src="./imgs/Phone_light.svg" alt="Contact" />
<p class="nav-btn-text">Contact</p>
</li>
<li />
</ul>
</div>
</nav>
{:else}
<nav class="navbar-background">
<ul class="flex justify-between">
<li class="nav-btn"><span class="font-bold">LAY</span>CODE</li>
<ul class="flex">
<li class="nav-btn">Home</li>
<li class="nav-btn">Portfolio</li>
<li class="nav-btn">Contact</li>
</ul>
</ul>
</nav>
{/if}
<div id="content">
<div id="tracker" bind:this={tracker} />
</div>
</main>
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.navbar {
position: fixed;
width: 100%;
background: #000;
display: flex;
justify-content: space-between;
}
.navbar-background {
background-color: #000;
position: fixed;
width: 100%;
height: 45px;
z-index: 100;
}
.nav-btn {
@apply text-white;
}
.nav-btn-mobile {
@apply text-white flex flex-col items-center;
}
.nav-btn-text {
line-height: 2;
overflow: hidden;
transition: all 300ms;
font-size: 0.8rem;
}
:global(.collapse) {
line-height: 0 !important;
}
#content {
height: 3000px;
background: lightblue;
padding: 1rem 3rem;
}
#tracker {
margin-bottom: 8rem;
}
}
</style>
【问题讨论】：
-
问题是，段落元素在
onMount函数中只设置一次。当onPhone为false时，元素将从 dom 中删除。这可以通过在观察者内部设置段落元素来解决。我用这个功能更新了我的帖子
标签： javascript html css tailwind-css svelte