Javascript 上下滚动Jquery sticky div

Javascript 上下滚动Jquery sticky div,javascript,jquery,html,Javascript,Jquery,Html,目前,我有一些代码,使一个div粘性上下滚动,但它是基于参数像素的88px。我想让div在用户向下或向上时保持粘性。到目前为止,我的代码是: $(window).scroll(function(e) { var $src = $('.container'); var isPositionFixed = ($src.css('position') == 'fixed'); if ($(this).scrollTop() > 88 && !isPosi

目前,我有一些代码,使一个div粘性上下滚动,但它是基于参数像素的88px。我想让div在用户向下或向上时保持粘性。到目前为止,我的代码是:

$(window).scroll(function(e) {
    var $src = $('.container');
    var isPositionFixed = ($src.css('position') == 'fixed');

    if ($(this).scrollTop() > 88 && !isPositionFixed) {
        $src.css({
            'position': 'fixed',
            'top': '44px'
        });
    }
    if ($(this).scrollTop() < 88 && isPositionFixed) {
        $src.css({
            'position': 'static',
             'top': '88px'
        });
    }
});
$(窗口)。滚动(功能(e){
var$src=$('.container');
var isPositionFixed=($src.css('position')='fixed');
if($(this).scrollTop()>88&!isPositionFixed){
$src.css({
'位置':'固定',
“顶部”:“44px”
});
}
if($(this).scrollTop()<88&&isPositionFixed){
$src.css({
“位置”:“静态”,
“顶部”:“88px”
});
}
});

您可以尝试使用
位置:sticky
,这里是我为您制作的一些示例

.mysticky{
职位:-网络工具包粘性;
位置:粘性;
高度:50px;
显示器:flex;
对齐项目:居中;
证明内容:中心;
背景色:#333;
颜色:#fff;
排名:0;
左:0;
}
.我的父母{
高度:300px;
溢出:滚动;
}

头
什么是Lorem Ipsum?
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来,Lorem Ipsum一直是行业标准的虚拟文本,当时一位不知名的印刷商拿起一个打印工具,将其拼凑成一本打印样本书。它不仅存活了五个世纪,而且还跨越到电子排版,基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行,最近随着Aldus PageMaker等桌面出版软件的发布,包括Lorem Ipsum版本

我们为什么要用它? 读者在查看页面布局时会被页面的可读内容分散注意力,这是一个早已确定的事实。使用Lorem Ipsum的意义在于,它的字母分布或多或少是正态的,而不是使用“此处内容,此处内容”,使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本,搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来,各种版本不断演变,有时出于偶然,有时出于故意(注入幽默等)

它来自哪里? 与流行的观点相反,Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一段古典拉丁文学,距今已有2000多年的历史。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德·麦克林托克(Richard McClintock)从《洛伦·伊普斯姆》(Lorem Ipsum)一段中查找了一个更为晦涩的拉丁语单词,即“Concertetur”,并查阅了古典文学中对该词的引用,发现了该词无可置疑的来源。Lorem Ipsum来自西塞罗于公元前45年所著《德菲尼布斯·博诺勒姆和马洛勒姆》(善与恶的极端)的第1.10.32节和第1.10.33节。这本书是一本关于伦理学理论的论文,在文艺复兴时期非常流行。Lorem Ipsum的第一行“Lorem Ipsum dolor sit amet..”来自第1.10.32节中的一行

以下是自1500年代以来使用的Lorem Ipsum的标准块,供感兴趣的人参考。西塞罗的“de Finibus Bonorum et Malorum”中的第1.10.32节和第1.10.33节也以其原始形式复制,并附有H.Rackham 1914年翻译的英文版本


您好,您尝试过
位置:sticky
吗?没有,我认为web浏览器对此的支持不是很好。应该没问题,我使用过很多次,我发布了我的答案,希望对您有所帮助!如果答案正确或对你有帮助,不要忘记投票并勾选我的答案