zoukankan      html  css  js  c++  java
  • css3 position:sticky 固定导航平滑过渡

    position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体。

     在可视区域内,表现是 relative属性

    超过区域外,固定在屏幕上,表现是 fixed属性

    一般方法是用js控制 position为 relative 和 fixed切换,但手机上滑动会有些滞后,卡顿,而 sticky属性能平滑过渡。

    判断sticky代码:

    function supportSticky(str){
                var t,
                    n = str,
                    e = document.createElement("i");
                e.style.position = n;
                t = e.style.position;
                e = null;
                return t === n;
            }

    对不支持sticky的处理:

    $(window).bind('scroll', function () {
                var isSticky = supportSticky('sticky') || supportSticky('-webkit-sticky');
    
                if(!isSticky){
                    if ($(this).scrollTop() < top_nav) {
                        $el.removeClass('fixed');
                    } else {
                        $el.addClass('fixed');
                    }
                }
            });

    css写法:

    .scrollMenu{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        width: 100%;
        height: 36px;
        z-index: 1000;
    }

    注意:如果body的css 设置overflow: hidden; 

            则 sticky失效。

  • 相关阅读:
    .net 自带的两个内置委托
    Socket
    SQL EXISTS与IN的区别(2)
    一个选择题,写了一个类
    SQL Server- 存储过程(2)
    VS插件-JSEnhancements
    SQL Server- 存储过程(1)
    MVC-工作原理
    C#-属性
    SQL Server 中游标的使用
  • 原文地址:https://www.cnblogs.com/damade/p/5742270.html
Copyright © 2011-2022 走看看