<!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. [BZOJ1058]报表统计

    Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...

  2. filebeat 乱码

    查看 文件的类型 [root@elk-node-1 rsyslog] # file 192.168.1.16.log 192.168.1.16.log: Non-ISO extended-ASCII ...

  3. 【网络优化】Batch Normalization(inception V2) 论文解析(转）

    前言 懒癌翻了,这篇不想写overview了,公式也比较多,今天有(zhao)点(jie)累(kou),不想一点点写latex啦,读论文的时候感觉文章不错,虽然看似很多数学公式,其实都是比较基础的公式 ...

  4. Python 实现C语言 while(scanf("%d%d", &a, &b) != EOF) 语句功能

    reference:Python 实现C语言 while(scanf("%d%d", &a, &b) != EOF) 语句功能 在python中,无法通过input ...

  5. Restore IP Addresses，将字符串转换成ip地址

    问题描述: Given a string containing only digits, restore it by returning all possible valid IP address c ...

  6. shell 条件语句

    shell 条件语句 #!/bin/bash # 条件语句 NUM1=100 NUM2=200 if (($NUM1 > $NUM2));then echo "$NUM1 greate ...

  7. Lubuntu系统中java，tomcat的环境搭建（virtualbox中）

    一.安装Lubuntu系统 这一步没什么说的,到官网下载镜像,在virtualbox中安装即可安装时就已经可以选择安装源,当然,选中国的设置环装网络,可将该虚拟机设立为网络上的独立IP,和物理机间可以 ...

  8. bzo1016: [JSOI2008]最小生成树计数

    现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的最小生成树 ...

  9. 玲珑oj 1117 线段树+离线+离散化,laz大法

    1117 - RE:从零开始的异世界生活 Time Limit:1s Memory Limit:256MByte Submissions:438Solved:68 DESCRIPTION 486到了异 ...

  10. nyi63——树

    #include<bits/stdc++.h> using namespace std; int cnt; struct node { int data; int flag; node * ...