<!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. heatbeat-gui实现基于nfs的mysql高可用集群

    一.简述HA高可用集群 高可用集群就是当集群中的一个节点发生各种软硬件及人为故障时,集群中的其他节点能够自动接管故障节点的资源并向外提供服务.以实现减少业务中断时间,为用户提供更可靠,更高效的服务. ...

  2. 第十篇：Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 query

    /** Spark SQL源码分析系列文章*/ 前面讲到了Spark SQL In-Memory Columnar Storage的存储结构是基于列存储的. 那么基于以上存储结构,我们查询cache在 ...

  3. 【网络结构可视化】Visualizing and Understanding Convolutional Networks（ZF-Net） 论文解析

    目录 0. 论文地址 1. 概述 2. 可视化结构 2.1 Unpooling 2.2 Rectification: 2.3 Filtering: 3. Feature Visualization 4 ...

  4. Berkeley parser使用方法

    1. 简介  Berkeley Parser 是加州大学伯克利分校 NLP 实验室开发的一种基于概率上下文无关文法(PCFG)的成分句法分析器,支持英语,汉语,德语等多个语种,它具有较高的句法分析性能 ...

  5. 【nginx】一台nginx服务器多域名配置

    Nginx 多域名配置 nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里.一. ...

  6. vue-router的一个小实例

    非2.0的 vue2.0还有vue-router2.0的改变还是挺大的 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于 ...

  7. Visual Studio 2017 序列号 Key 激活码 VS2017 注册码

    Visual Studio 2017(VS2017) 企业版 Enterprise 注册码 序列号:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(V ...

  8. 负载均衡，会话保持，session同步

    一,什么负载均衡 一个新网站是不要做负载均衡的,因为访问量不大,流量也不大,所以没有必要搞这些东西.但是随着网站访问量和流量的快速增长,单台服务器受自身硬件条件的限制,很难承受这么大的访问量.在这种情 ...

  9. UVALive - 6709树套树

    题意:给你一个矩阵,q次操作,每次查询长宽l的矩阵最大值a和最小值b,然后把中间点换成floor((a+b)/2), 解法:暴力可过,建n颗线段树暴力更新,但是正解应该是树套树,树套树需要注意的是当建 ...

  10. Attribute 'items' must be an array, a Collection or a Map错误解决！

    唉!真的要说一句话叫做论一串代码的重要性!就是如此的气人!气的牙根痒痒! 前几天刚刚写过SpringMVC之ModelAndView的 jsp值在浏览页面不显示的问题!也是因为这一串代码,但是这一次一 ...