javascript - 如何应用 var height = $(window).height() - 20; .followTo() 函数

Question

我有这个脚本。它非常简单。但我的 JS 技能充其量只是摇摇欲坠。它使导航(位于窗口底部)随内容滚动，直到到达页面顶部，然后保持固定。或者正如有些人所说的“粘性”

我遇到的问题是因为我的横幅高度为 100%。 .followTo(830);仅适用于我的屏幕分辨率。如何让 followTo() 找到窗口当前高度，然后跟随到该高度，然后从 followTo 值中减去 20px？那将是理想的。这可以相当简单地完成吗？

    var windw = this;
    $.fn.followTo = function ( pos ) {
        var $this = this,
            $window = $(windw);
        $window.scroll(function(e){
            if ($window.scrollTop() > pos) {
                $this.css({
                    position: 'fixed',
                    top: "20px"
                });
            } else {
                $this.css({
                    position: 'absolute',
                    bottom: '0',

                });
            }
        });
    };
    $('#mainNav').followTo(830);

有人说我需要使用 var height = $(window).height() - 20; 但我不知道如何应用它，他们拒绝详细说明，而是只是否决了我的帖子并让我引用整个 jquery API.. 这不是我的学习风格。

我还尝试过使用if ($(document).height() - $window.height() - $('#mainNav').scrollTop() < pos)我想我只是搞乱了语法？

Answer 1

只需使用 var height = $(window).height() - 20; 代替 830，如下所示:

var height = $(window).height() - 20;
$('#mainNav').followTo(height);

请记住，窗口大小可能会发生变化(例如，浏览器窗口的大小会调整或设备的方向会发生变化)