Question

我在页脚here之前使用以下javascript作为页面顶部徽标/部分：

<div id="townEnd"><a href="#">InsideTown</a></div>

    <script>
    $(document).ready(function(){

        // hide #townEnd first
        $("#townEnd").hide();

        // fade in #townEnd
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 1000) {
                    $('#townEnd').fadeIn();
                } else {
                    $('#townEnd').fadeOut();
                }
            });

            // scroll body to 0px on click
            $('#townEnd a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });

    });
    </script>

如何计算徽标何时应该在页面末尾淡出？我只用了1000作为例子。当我滚动得非常快时，它似乎才有用。

Answer 1

首先，您应该使用this.scrollTop而不是$(this).scrollTop() - 这对您来说可能看起来不多，但这是一件巨大的事情。

在同一条路径上，您可以使用this.scrollHeight来获取可滚动区域的高度。减去this.innerHeight以获得最大滚动位置，然后减去大约30个像素以给自己一些填充。

if( this.scrollTop < this.scrollHeight - this.innerHeight - 30)

您还应该有一个布尔值来跟踪您更新的元素的状态，可能是isfadedin。然后，如果状态发生变化，则只调用fadeIn和fadeOut。这将节省大量的处理时间！

Vanilla JS太棒了：p

Onscroll页面顶部：定义页面结尾

1 个答案: