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

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

如何应用var height = $（window）.height（） - 20; to .followTo（）function

1 个答案: