Question

如果你不知道什么位置：粘性，请观看这个20秒长的视频：https://www.youtube.com/watch?v=jA67eda5i-A。

我认为这个CSS功能正在W3中进行，并在壁虎中实现。但除此之外，重点是并非所有浏览器都支持它，我真的想要这个功能。

有什么方法可以使用CSS和/或javascript和/或jquery混合使用吗？

Answer 1

这个:: http://stickyjs.com/

有一个简单的jquery插件

Answer 2

为避免使用插件，我使用jquery 1.8+创建了以下javascript方法。

第一个参数是您要设置粘性的元素。第二个参数是optionnal，它是一个布尔值，通过设置300ms的较小超时来提高浏览器性能。

function simulateSticky(elt, timeout) {
    var move = function() {
        var scrollTop = $(window).scrollTop();
        var scrollBottom = $(document).height() - scrollTop - $(window).height();

        var eltTop = elt.parent().offset().top;
        var eltBottom = $(document).height() - eltTop -  elt.parent().outerHeight();

        if (scrollTop < eltTop) { // Top case
            elt.css({
                position: "absolute",
                width: "100%",
                top:"auto",
                right: "0px",
                bottom: "auto",
                left: "0px",
            });
        }
        else if (scrollTop >= eltTop && scrollBottom >= eltBottom) { // Middle case
            elt.css({
                position: "fixed",
                width: elt.parent().outerWidth(),
                top:"0px",
                right: "auto",
                bottom: "auto",
                left: "auto",
            });
        }
        else { // Bottom case
            elt.css({
                position: "absolute",
                width: "100%",
                top:"auto",
                right: "0px",
                bottom: "0px",
                left: "0px",
            });
        }
    };

    // Use of a timeout for better performance
    if (timeout) {
        var timeoutId;
        $(window).scroll(function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function() {
                move();
            }, 300);
        });
    }
    else {
        $(window).scroll(move);
    }

    // Initial call
    move();
}

我能做些什么来模拟位置：粘滞？

2 个答案: