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
    
  • 相关阅读:
    Symfony框架实战学习
    学习Symfony之环境的搭建
    js的学习 (数组)
    js的学习 (对象)
    js的学习 (语句)
    Django 应用开发(3)
    Django 应用开发(2)
    Django 学习搭建博客
    2-4.通用选择器
    2-3.class选择器
  • 原文地址:https://www.cnblogs.com/10manongit/p/12208570.html
Copyright © 2011-2022 走看看