zoukankan      html  css  js  c++  java
  • html简单响应式滚动条置顶

    简单响应式滚动条置顶

    一般的,让页面出现滚动条的常见方法有:

    overflow:auto||overflow:scroll
    或者overflow-x水平滚动条和overflow-y垂直滚动条
    

    那么现在要实现这样的一个效果:

    直接在body中给一个header,后面一个Group盒子,并且header为常驻顶部的,实现滚动条顶部位置不滚动到header中(包含在header中会影响美观) 

    首先看例子:
    sfNote_0924_0182b3f.png

    分析:

    每当滚动条移动到header的高度的位置时,这时盒子中的前排内容是并没有显示出来的,但是滚动条到此处就得停止。那么盒子首先就需要设置一个margin-top:header的高 ,和定位top的值 ,在js中也要控制scrollTop值,通过判断滚动条移动到容器顶部时固定

    header{position: fixed;top: 0;left: 0;right: 0;z-index: 999;}  
      #con{margin-top: 150px;position: absolute;top:50px;}

    sfNote_0924_038b8df.png

    最终效果:

    sfNote_0924_04d47fa.png

    js获取屏幕滚动条:document.documentElement.scrollTop || document.body.scrollTop
    
  • 相关阅读:
    网页字体大小控制
    表格文本框搜索匹配
    表格展开和关闭
    表格复选框控制行高亮
    jquery表单验证
    文本框变大变小效果--jQuery
    滚动条高度变化jQuery
    点击标题显示隐藏效果--jQuery
    jQuery练习2-1
    jQuery练习2
  • 原文地址:https://www.cnblogs.com/10manongit/p/12208570.html
Copyright © 2011-2022 走看看