<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>吸顶效果</title>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    body{

        height: 2000px;

    }

    /*吸顶效果*/

    #top{

        line-height: 50px;

        background: red;

        color: yellow;

        font-size: 20px;

        text-align: center;

        text-shadow:  0 0 8px tomato;

    }

    #top::selection{

        color: maroon;

        background:#fff;

    }

    /*隐藏头部*/

    #header{

        width: 100%;

        line-height: 50px;

        background: rgba(0,0,0,.4);

        text-align: center;

        box-shadow: 0 0 5px black;

        position: fixed;

        left: 0;

        top: -103px;

    }

    #header.top{

        top: 0;

        transition-top:0.5;

    }

    .txt:hover{

        box-shadow: 0 0 2px red;

    }

    .btn:hover{

        box-shadow: 0 0 2px red;

    }

    .txt{

        width: 190px;

        height:26px;

        vertical-align: middle;

        border:1px solid #ccc;

        border-right: 0;

        outline: none;

        transition: .5;

    }

    .btn{

        width: 35px;

        height:28px;

        vertical-align: middle;

        border:1px solid #ccc;

        border-left: 0;

        outline: none;

        cursor: pointer;

        transition: .5;

    }

    p{

        font-size: 20px;

        font-weight:30;

        color:#ff0;

    }

</style>

</head>

<body>

    <div id="top">If you do you can do you will never more than you are now!</div>

    <div id="header">

        <p>悦享品质</p>

        <form action="">

            <input type="text" class="txt" value="SERACH..."><input type="submit" value="搜索" class="btn">

        </form>

    </div>

    <script>

        //吸顶效果

        var oTop = document.getElementById('top');

        setTimeout(function(){

            oTop.style.display = 'none';//设置id为top的样式

        },3000);

        var oHeader = document.getElementById('header');

        window.onscroll = function(){

            //获取窗口的滚动条位置

            var sScroll = document.body.scrollTop || document.documentElement.scrollTop;

            if(sScroll >= 400){

                oHeader.className = 'top';

            }else{

                oHeader.className = '';

            }

        }

    </script>

</body>

</html>

　　

 

js之吸顶效果的更多相关文章

  1. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  2. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  3. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  4. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

  5. 自定义tab吸顶效果一（原理）

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  6. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  7. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  8. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  9. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

随机推荐

  1. 一键安装 zabbix 3.0 版本 脚本

    原文地址: http://blog.csdn.net/u012449196/article/details/53859068 本文修改了原文中的部分错误,此脚本适用于zabbix 2.0 或 3.0 ...

  2. Hue的安装与部署

    Hue的安装与部署 hadoop hue Hue 简介 Hue是一个开源的Apache Hadoop UI系统,最早是由Cloudera Desktop演化而来,由Cloudera贡献给开源社区,它是 ...

  3. 解题报告：hdu1012

    2017-09-07 21:46:53 writer:pprp 写一下水题,调节一下心情~ /* @theme: hdu 1012 u calculate e @writer:pprp @begin: ...

  4. rownum和order by的执行顺序问题

    SQL中rownum和order by的执行顺序的问题 : 在一个SQL中,如果同时使用rownum和order by,会有一个先后顺序的问题. 比如select id1,id2 from t_tab ...

  5. java classloader原理深究

    前面已经写过一篇关于java classloader的拙文java classloader原理初探. 时隔几年,再看一遍,觉得有些地方显得太过苍白,于是再来一篇: 完成一个Java类之后,经过java ...

  6. 关于IIS权限问题(Selenium WebDriver调用出错记录)

    本地VS调试过程中用Selenium WebDriver打开FF浏览器可以正常工作,项目部署至IIS后请求调用浏览器一直提示超时,异常如下: 因为本地调试可以成功,首先排除组件版本问题和浏览器兼容问题 ...

  7. poi解析Excel文件版本问题

    poi解析Excel文件时有两种格式: HSSFWorkbook格式用来解析Excel2003(xls)的文件 XSSFWorkbook格式用来解析Excel2007(xlsx)的文件 如果用HSSF ...

  8. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  9. 15 个有趣的 JS 和 CSS 库

    开发者们,一起来看看有木有你需要的前端库. 1. DisplayJS DisplayJS 是一个帮助你渲染 DOM 的简易框架.使用它,你可以更容易地将 JS 变量遍历到特定的 HTML 元素中,类似 ...

  10. cordova安卓sdk

    Android SDK在线更新镜像服务器来下载安装: 1.北京化工大学镜像服务器地址: IPv4: ubuntu.buct.edu.cn/ 端口:80 IPv4: ubuntu.buct.cn/ 端口 ...