jquery - 形象是固定的，其他是相对的

Question

下面是我的代码，在此代码中，图像将在所有部分中固定，但我需要图像在前两个部分固定，在第三部分之后，图像位置将是相对的和滚动的。

现在我的图像在前两部分是固定的，但在第三部分没有滚动请帮助我找到更好的解决方案。

在我的片段下面:

var windw = this;

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

$('#f').followTo('#third');

section{
width:100%;
height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<h1>first section</h1>
<img src="http://simform.solutions/HTML/silo/image/Bitmap.png" id="f">
</section>
<section>
<h1>2 section</h1>
</section>
<section id="third">
<h1>3 section</h1>
</section>
<section>
<h1>4 section</h1>
</section>
<section>
<h1>5 section</h1>
</section>

Answer 1

您应该计算 (pos = $(pos).offset().top;) 元素的偏移顶部，然后与窗口 scrollTop() 进行比较，因为这里你只传递元素的文本 id

请看下面的片段:

var windw = this;

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

$('#f').followTo('#third');

section{
width:100%;
height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<h1>first section</h1>
<img src="http://simform.solutions/HTML/silo/image/Bitmap.png" id="f">
</section>
<section>
<h1>2 section</h1>
</section>
<section id="third">
<h1>3 section</h1>
</section>
<section>
<h1>4 section</h1>
</section>
<section>
<h1>5 section</h1>
</section>