Question

这可能是一个简单的问题，但请帮忙！我使用下面的代码实现了粘性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); }

    });
});

和CSS

.stick {
    position:fixed;
    top:0px;
    /*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
    z-index: 1000;
}

Answer 1

将windowpos >= pos.top更改为windowpos >= (s.height()/2) + pos.top

修改

http://jsfiddle.net/BVK2q/

Answer 2

SEE THE DEMO

只有当你的div上升50％时，div才会获得.stick样式。但是当你将fixed位置应用于某个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');
    }
});
});

滚动超过50％项目时如何粘贴div？

2 个答案: