tnblog
首页

干货!div滚动到一定位置就固定他

133人阅读 2019/2/17 22:53 评论:0 收藏
分类: 前端

尊重原创:转载请申明出处


div滚动到一定位置就固定他,例如左边的内容很多,右边的内容很少,如果不处理滚动到一定位置后

右边的数据就看不到了,所以可以在滚动到一点层度后保持右边的数据不动不随着滚动条的滚动而

滚动,这样不会只看到一边的内容,另外一边是空白的情况,用户体验很更好,颜值会更高....。

 废话不多说!直接上代码 。

不要小看这点代码,自己一点一点写还是会遇到坑的,会花不少时间的,抛砖引玉,分享才会创造更多价值

<script src="~/lib/jquery/dist/jquery.js"></script>
<title>首页</title>

<style>

    .mydiv {
        margin-left: 200px;
        width: 180px;
        height: auto;
        background: #ff5555;
        overflow: auto;
    }


    .content {
        display: -webkit-box !important;
        display: -moz-box !important;
        display: -o-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flexbox !important;
        display: flex !important;
        display: box !important;
        flex-direction: row;
    }
</style>


<div class="content">

    <div class="text-center" style="height:1800px;background:#abcdff;width:500px;">
        新年好
    </div>

    <div>
        <div class="mydiv" id="rightdiv">
            <div style="width:180px;height:300px;background:#00ff00; flex: auto;">
                hello girl1
            </div>
            <div style="width:180px;height:300px;background:#0abcde;margin-top:30px; flex: auto;">
                hello girl2
            </div>
            <div style="width:180px;height:300px;background:#ccff00;margin-top:30px; flex: auto;">
                hello girl3
            </div>
        </div>
    </div>

</div>



<script>

    $(window).scroll(function () {

        //获取滚动条的高度
        var scrollTop = $(this).scrollTop();
        //获取一个屏幕的高度
        var windowHeight = document.body.clientHeight;

        console.log("div本身的高度:" + $('#rightdiv').height());
        console.log("距离顶部的的位置" + scrollTop);

        //把需要的div滚动到底部就固定div不让移动了
        if (scrollTop > $('#rightdiv').height() - windowHeight) {
            $("#rightdiv").css("position", "fixed"); //固定div让其不随着滚动条的滚动而滚动
            $("#rightdiv").css("bottom", "10px");
        }
        else {
            $("#rightdiv").css("position", "static");//恢复div可以跟随滚动条滚动
        }

    });

</script>

这里左右两边的div用的是flex布局,也可以使用浮动,不过这不是重点!,重点是怎么动态固定div的位置!


在实际运用中,可能还会遇到一些细节问题

例如设置了固定布局后宽度百分比就会是相对整个浏览器,整个时候可以先获取一下div的宽度,在需要固定的

时候把这个宽度给他就行了




请先登录

{{item.title}}

{{item.content}}
断剑重铸之日,骑士归来之时
博主搜索
文章类别
最新文章
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}