jquery css 实现网页下滑时,某个div保持页面为止不动

标签:, ,
来源: 老季博客
日期: 2023-7-29
作者: 腾讯云/服务器VPS推荐评测/Vultr
阅读数: 60

最近在学seo,发现很多网站中都有这种的,页面下拉时某个div保持在页面的位置不动的效果,实现起来其实很简单,这边我们记录一下简单的代码

jquery方法定义

    $.fn.smartFloat = function () {
        var position = function (element) {
            console.log(element);
            var top = element.position().top, pos = element.css("position");
            $(window).scroll(function () {
                var scrolls = $(this).scrollTop();
                if ((scrolls - 30) > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0,
                            width: "100%",
                            "background-color": "#FFF",
                            "z-index": 1
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                } else {
                    element.css({
                        position: pos,
                        top: top
                    });
                }
            });
        };
        return $(this).each(function () {
            position($(this));
        });
    };

调用方法

$(".post-view-ranking-wrap").smartFloat();
链接到文章: https://jiloc.com/49720.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注