0

我编写了同一个主页的两个版本：一个是快速滚动，另一个是当我向下滚动时标题导航隐藏并在我向上滚动时显示。

问题是我无法让它们一起工作，因为我必须删除“溢出：滚动”和“高度：100vh”才能使菜单隐藏工作，但这将阻止快照滚动到功能。

<header>
    <nav>
        Navigation
    </nav>
</header>
    
<main>
    <article>
        <section class="a">
        </section>
        <section class="b">
        </section>      
        <section class="c">
        </section>
    </article>
</main>
    
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        'use strict';           
        var c, currentScrollTop = 0,
            navbar = $('nav');
        $(window).scroll(function() {
            var a = $(window).scrollTop();
            var b = navbar.height();
            currentScrollTop = a;           
            if (c < currentScrollTop && a > b + b) {
                navbar.addClass("scrollUp");
            } else if (c > currentScrollTop && !(a <= b)) {
                navbar.removeClass("scrollUp");
            }
            c = currentScrollTop;
            console.log(a);
        });         
    });
</script>

这些是我的风格：

body {
     margin: 0;
}
nav {
     border-bottom: 0.05rem solid black;
     height: 5rem;
     line-height: 5rem;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 10000;
     transition: all 0.5s;
}
nav.scrollUp {
     transform: translateY(-6rem);
}
nav ul {
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
}

article {
     display: flex;
     flex-wrap: wrap;
     scroll-snap-type: mandatory;
     scroll-snap-type: y mandatory;
     overflow: scroll;
     height: 100vh;
}
section {
     scroll-snap-align: start;
     height: 100vh;
     width: 100vw;
}
section.a {
    background-color: pink;
}
section.b {
     background-color: tomato;
}
section.c {
     background-color: yellow;
}

我已经为标题使用了三个不同的 js 脚本，但都归结为同一个问题：文章选择器中的溢出/高度样式。

任何想法如何让它发挥作用？先感谢您！

4

0 回答 0