Javascript 当滚动超过项目的50%时，如何粘贴div？

这可能是一个简单的问题，但请帮助！ 我使用下面的代码实现了一个粘性

div

，但我需要知道如何更改

div

被“卡住”的位置

我想要的是，我的

div

只有在50%已滚动到顶部时才会卡住。目前，当它到达顶部时会卡住，但我希望它的50%在卡住之前一直滚动到一半（大致）

$(document).ready(function() {
    var s = $("#picture1");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
        if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", s.height()); } else { s.removeClass("stick"); $("body").css("margin-top", 0); }

    });
});

---

将

windowpos>=pos.top

更改为

windowpos>=（s.height（）/2）+pos.top

编辑

只有当你的div上升50%时，div get的

.stick

样式才有效。但是当你把

fixed

position应用到某个div上时，它会从正常的布局中消失，你就失去了在其上获得任何边距的能力。因此，在这种情况下，您必须对主体应用边距或填充，您也已经这样做了

不管怎样，我只是稍微调整了一下你的代码，来展示你如何得到你想要的

$(document).ready(function() {
var s = $("#picture1"),
pos = s.position(),
sHeight = s.height();

$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= (sHeight/2) + pos.top) {
        s.addClass("stick");
        $('body').css('paddingTop', sHeight + 60);
    } else {
        s.removeClass("stick"); 
        $('body').css('paddingTop', '0');
    }
});
});

---

谢谢你，但是当它得到这个位置时，整个div就消失了！我不确定。。但请尝试删除第二条if-else语句。。“边距顶部”样式可能是干涉，这似乎与此有关，但如果我删除该行，粘贴Div的顶部50%会随着页脚（可能重复）而被卡住，身体的其余部分会跳跃以填充固定Div的空间，就好像它消失了一样。不过，我们走在正确的轨道上！你能做一把小提琴吗？很像莫文的小提琴-但我需要。坚持只显示50%，而不是跳回到100%，谢谢你。但是你怎么才能让它只坚持50%呢？所以它不会跳回到100%。就像你的演示一样