一、描述

  • 当页面的标题不在页面显示时，把标题固定在页面顶部。

二、思路

  • 通过比较元素距离窗口顶部的距离，Y轴滚动条距离窗口顶部的距离，来设置标题的样式；
  • 如果数据足够多，就不会有问题；
  • 问题重现,【 浏览器：火狐浏览器，分辨率：500 * 500】。如下图，你会发现Y轴滚不到最下面。
    在这里插入图片描述

三、解决

  • 不用Js计算距离，直接通过Css样式设置。
  • 请打开以下代码<style>标签里的内容，注释titleTop()方法。

四、代码

<html>
<head>
    <title>悬浮Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        /*.tab {
            position: relative;
        }
        .title {
            top: 0;
            left: 0;
            z-index: 999;
            position: sticky;
        }*/
    </style>
</head>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<body>
<div class="tab">
    <div class="title" style="background: black;color: white">
        这是标题 - 内容过多时标题悬浮在最顶部
    </div>
    <div>
        这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />
        这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容<br />
        这是内容<br />这是内容<br />这是内容<br />这是内容<br />这是内容
        <!--这是内容<br />这是内容<br />这是内容<br />-->
    </div>
</div>
</body>
<script>
    //title超出可视范围，页面顶部固定住title
    function titleTop() {
        var titleTop = $('.title').offset().top; //title距离顶部的距离
        $(window).scroll(function () {
            var scrollYToTop = $(window).scrollTop(); //滚动条距离顶部的距离
            //滚动条距离顶部的距离 > title 距离顶部的距离，意味着 title 即将不显示，设置样式，使title悬浮固定在顶部
            if (scrollYToTop > titleTop) {
                $('.title').css({ //添加样式，固定住Tab
                    'top': 0,
                    'left': 0,
                    'width': '100%',
                    'z-index': 999,
                    'position': 'fixed'
                });
            } else { //没超过
                $('.title').css({'position':'static'}); //移除重置
            }
        });
    }

    titleTop();

</script>
</html>