时间戳

首页 > 解决方案 > #section 在页面顶部时显示元素

html - #section 在页面顶部时显示元素

问题描述

#header一旦我section#about的顶部到达页面/视口的顶部，我需要显示我的元素。

所以在基本方面：

如果section#about在offset > 1展会上#header

我目前正在使用以下 jQuery 来控制#header550 像素的显示，但我需要更精确，因为更大的屏幕将达到不同的像素测量值（因此需要根据部分何时到达顶部来触发）。

$("#header").hide();
$(window).scroll(function() {
    if ($(window).scrollTop() > 550) {
        $("#header").fadeIn("slow");
    }
    else {
        $("#header").fadeOut("fast");
    }
});

标签： htmljquery

解决方案

我认为这应该有效：

  $(document).ready(function() {
                    var aboutOffset = $('#about').position();
                    var header = $("#header");
                    console.log(aboutOffset);
                    
                    $(window).scroll(function() {
                        console.log($(window).scrollTop());
                        if ($(window).scrollTop() > aboutOffset.top - header.height()) {
                            if (!header.is(':visible')) {
                                $("#header").fadeIn("slow");
                            }
                        }
                        else {
                            if (header.is(':visible')) {
                                $("#header").fadeOut("fast");
                            }
                        }
                    });
                });
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <header id="header" style="display: none; position: fixed;">HEADER AAAA</header>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <section id="about">
                ABOUT SECTION
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </section>

推荐阅读