Question

我喜欢这段代码有效，但我不能，为了任何事情，包围我为什么它的工作？

以下是代码：

jQuery(document).ready(function($) {
    clone = $('div').clone();
    $('div').after(clone);
    $('div:last').hide();

offset = $('div:first').offset();
var fromtop = offset.top;

$(document).scroll(function() {
    doc = $(this);
    dist = $(this).scrollTop();

    if (dist >= fromtop) {
        $('div:last').show();
        $('div:first').css({
            'position': 'fixed'
        });
    } else {
        $('div:first').css({
            'position': 'static'
        });
        $('div:last').hide();
    }
});

});

我想我不理解scrolltop和offset是如何交互的，或者它们真正是什么，就像它们在页面上的真实位置一样。代码说如果ScrollTop（滚动条位置？）高于div的offsettop的值，则使div粘滞。但是如果ScrollTop是滚动条的位置，那么在div位于页面顶部之前，有时滚动条位置可能低于div的位置是不是真的？什么是在页面的顶部（偏移顶部0？） - 并且只在页面的顶部，从来没有 - 使offsettop比scrolltop更小的值？

真的很困惑，我不想只是复制代码而不理解它真正在做什么。

Answer 1

滚动顶部实际上是页面移动了多少像素（或者你向下移动了多少像素）

基本上所有发生的事情都是.offset看到页面下方（从页面顶部）“粘性”菜单的距离

当您滚动到该点时，条形会变得固定（基本上相对于窗口而不是文档）

当您向上滚动时，它只会切换回位于文档中。

为清楚起见

.offset = 200px say - this is how far down the document the sticky menu is

.scrollTop - is 0 when the page loads

向下滚动页面201px

 .scrollTop > .offSet -> so make the bar fixed (remember fixed is relative to the window - not the document)

如果向后滚动，则反转过程。

Answer 2

实际上非常简单。让我试试，如果我能让你清楚一点：

每当你想要一些东西（让我们说一些div）在你向下滚动时固定在顶部时，你需要两件事：

您需要div的当前垂直位置。你通过使用offset（）。top
您需要跟踪用户滚动的数量。你通过使用scrollTop（）

所以在你的情况下，如果div的当前位置是top：100，那么只要你的滚动条到达数字101，你的div就会得到.fixed的类

默认情况下，页面加载时滚动条垂直位置为0.

有人可以解释为什么这个代码工作制作div滚动后粘到顶部？

2 个答案: