美文网首页
div滑动过程中置顶

div滑动过程中置顶

作者: newway_001 | 来源:发表于2019-05-09 19:11 被阅读0次

    方法1:获取实时高度,与特定值比较,而后决定是否选择position:fixed;

            $(window).scroll(function () { //一周记录一栏置顶;
                var clientWidth = document.documentElement.clientWidth;
                var height = 1.6;//该div高度为1.6rem;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                    height = height * 100;
                } else {
                    height = height * 100 * (clientWidth / 750);
                }
    
                var scroH = $(this).scrollTop();//scroll实时高度;
                if (scroH >= height) {
                    $(".j-dateAndreselection").addClass('fixed')
                } else {
                    $(".j-dateAndreselection").removeClass('fixed')
    
                }
    
            })
    

    还有一个非常简单的办法:

    #one { position: sticky; top: 10px; }
    

    position: sticky必须要设置top,left,right,bottom四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    在 viewport 视口滚动到元素 top 距离小于 10px 之前,
    元素在文档流中。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。

    但是这个有一个有趣的问题,如果父元素是body;

    最初显示的屏幕全部上移之后;
    sticky会失效;
    元素跟着上移;

    position: sticky;注意事项:

    1、父元素不能overflow:hidden或者overflow:auto属性。
    2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
    3、父元素的高度不能低于sticky元素的高度
    4、sticky元素仅在其父元素内生效

    相关文章

      网友评论

          本文标题:div滑动过程中置顶

          本文链接:https://www.haomeiwen.com/subject/dxmgoqtx.html