如何從導航欄中刪除帶有動畫的文本

萊托

你好,我想為手機製作這個導航欄,當用戶向下滾動時,它會剪切文本,但我很困惑我該怎麼做,因為如果我只是向上移動導航欄,它會首先開始剪切我的圖像給我一個關於如何解決這個問題的線索,這是我的代碼(注意我使用了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>

在此處輸入圖片說明

您可以使用 anIntersectionObserver來跟踪元素在頁面上的位置。當它穿過某個點時,在菜單中的段落元素上切換一個類,什麼會轉換line-height.

一個REPL

(沒有窗口調整大小/onPhone功能的舊版本>> REPL

<script>
    import Icon from './Icon.svelte'
    import {onMount} from 'svelte'
        
    let tracker, paragraphs

    onMount(() => {
        sectionObserver.observe(tracker)
    })

    // 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);

    // setup section Observer
    const options = {
        rootMargin: "0px 0px 0px 0px"
    }   
    const sectionObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
//          console.log(entry)              
            paragraphs = [...document.getElementsByTagName('p')]
            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="mobile">
            <li class="nav-btn">
                <Icon icon={1} />
                <p class="nav-btn-mobile">Home</p>
            </li>
            <li class="nav-btn">
                <Icon icon={2} />
                <p class="nav-btn-mobile">Portfolio</p>
            </li>
            <li class="nav-btn">
                <Icon icon={3} />
                <p class="nav-btn-mobile">Contact</p>
            </li>
        </ul>   
        </div>
    </nav>
    {:else}
          <nav class="navbar-background">
            <ul class="flex justify-between">
              <li class="nav-btn logo"><div><b>LAY</b>CODE</div></li>                
                            <li class="nav-btn">Home</li>
                            <li class="nav-btn">Portfolio</li>
                            <li class="nav-btn">Contact</li>                
            </ul>
        </nav>
    {/if}
    
    <div id="content">
        <div id="tracker" bind:this={tracker}></div>
        <h1>
            Page Content
        </h1>
    </div>  
</main>

<style>
    :global(body) {
        margin: 0;
        padding: 0;
    }
    ul {
        position: fixed;
        width: 100%;
        background: #e3e3e3;
        margin: 0;
        padding:0;
        list-style: none;
        display: flex;
        justify-content: space-evenly;
    }
    li {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .5rem;
    }
    .logo {
        white-space: nowrap;
    }
    p {
        line-height: 2;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transition: all 300ms;
    }   
    :global(.collapse) {
        line-height: 0 !important;
    }
    #content {
        height: 3000px;
        background: lightblue;
        padding: 1rem 3rem;
    }
    #tracker {
        margin-bottom: 8rem;
    }
</style>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

單擊時如何修復導航欄中的設計被刪除?

如何刪除底部導航欄中的標題 - Android Studio

如何刪除導航欄中徽標和列表項之間的空間?

如何在引導網格系統中製作帶有右側文字的垂直導航欄

帶導航器的底部導航欄?

Qt 從動畫中刪除鍵值

如何從動畫代碼中刪除變量

如何將引導程序導航欄的內容移動到中間?

從導航抽屜 Kotlin 中恢復已刪除的項目

Bootstrap 5 如何在導航欄中對齊文本?

如何在 bootsrap 5 的導航欄中添加文本顏色?

導航欄中右側的文本不顯示

在 Bootstrap 導航欄中居中文本

如何在導航欄中向右移動列表?在 reactjs 和 css 中

如何更改活動錨點的樣式(在側邊欄導航中)?

通過導航 SQL Server 中的所有表,從 json 數組中刪除具有給定 id 的元素

如何使用 OnRowDeleting 從帶有 List<> 數據源的 gridview 中刪除行

使用底部導航欄顫動 webview 導航

Flutter 佈局 3 列寬 3 行深,下方帶有圖標和文本 - 圖標 OnPressed(不是導航欄而是全屏)

如何在移動設備的導航欄中顯示兩個不同的圖標

在顫動中單擊時如何禁用項目的底部導航欄彈出大小

如何在引導程序的導航欄中將徽標與導航項分開

移動引導程序中的導航欄不起作用

導航欄中的下拉菜單

Gatsbyjs 中的自定義導航欄

如何在jetpack compose中隱藏導航欄和狀態欄?

如何使用vanilla JS從重繪中刪除畫布

如何刪除工具欄?

單擊導航欄到頁面的特定部分時,如何自動滾動?

TOP 榜单

热门标签

归档