zoukankan      html  css  js  c++  java
  • 滚动页面一定距离后固定导航条

    需求:滚动页面到一定距离后,页面中间的导航条固定到页面的某个位置不动,滚回去时会复原。

    document.addEventListener('scroll', function (event) { 
        var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollDistance >= 230) {    // 触发的位置
            document.getElementsByClassName('nav-items‘)[0].style.cssText = 'position:fixed;top:-10px;';
        } else {
            document.getElementsByClassName('mu-tabs')[0].style.cssText = 'position:static;';
        }
    });

    注意:

    1.子元素和父元素都有滚动条时,滚动鼠标滚轮:

      鼠标在父元素中,页面只滚动父元素;鼠标在子元素中时,页面只滚动子元素,只有当子元素滚到底之后,才会滚动父元素。

      如果要在子元素中直接滚动父元素,只能先把子元素的滚动条消除,如把子元素的容器高度设置成auto,或通过mousewheel/touchmove事件函数处理。

    2.元素的position从static变为fixed时,会从原来的文档流中删除,高度发生变化,导致页面有轻微的跳动。解决方法是在导航条外层加一个高度相同的容器包裹一下。

    <div class='navsContainer'>
        <ul class='nav-items'>
            <li>index</li>
            <li>details</li>
            <li>about</li>
        </ul>
    </div>
  • 相关阅读:
    Windbg 基本调试常识(转)
    善用VS中的Code Snippet来提高开发效率
    如何跟踪调试Software product?
    Visual Studio 2008 每日提示(二十七)
    6步确保 windbg 成功调试 .net(转)
    Visual Studio 2005 重置设置
    Print to Output /To trace runtime
    Windbg安装和配置(转)
    C++与C#交互
    All hands on deck
  • 原文地址:https://www.cnblogs.com/kevin2chen/p/7616747.html
Copyright © 2011-2022 走看看