2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

vue stickey 吸附效果

javascript作者:猿2048志愿者
  1. 这种效果:
  2. 97af8828-f39f-11e6-82db-55405160eea3.gif

采用positions:sticky可以实现,但是兼容性太差了,现在的想法是通过js判断区域内滚动条距顶部高度+fixed来实现,但具体实现步骤还没想清楚,比较混乱,希望能求个demo或者详细一点的思路

评论
点击刷新
评论
被采纳
猿2048志愿者
猿2048志愿者 :

用jq写了个demo,可以参考一下

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }

    header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: orange;
        text-align: center;
    }

    header.active {
        position: fixed;
        top: 0;
        left: 0;
    }

    div {
        width: 100%;
        height: 300px;
        padding-top: 50px;
        position: relative;
    }
    </style>
</head>

<body>
    <div class="header">
        <header>1</header>
    </div>
    <div class="header">
        <header>2</header>
    </div>
    <div class="header">
        <header>3</header>
    </div>
    <div></div>
    <div class="header">
        <header>4</header>
    </div>
    <div class="header">
        <header>5</header>
    </div>
    <div class="header">
        <header>6</header>
    </div>
</body>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
    $('header').each(function(index, event) {
        $(this).css({ 'z-index': index + 1 });
    });
    
    $(document).scroll(function() {
        $('.header').each(function(index, event) {
            var _this = $(this).find('header');
            if ($(window).scrollTop() - $(this).offset().top >= 0) {
                $(_this).addClass('active');
            } else {
                $(_this).removeClass('active');
            }
        });
    });
})
</script>

</html>
2018-11-25 09:55:03
×添加代码片段