<!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. TCP/IP的相关协议

  2. JAVA基础补漏--链表

    查询慢:链表中数据不是连续的,每次查询元素,都得从头开始 增删快:链表结构,增加或删除一个数据,对链表的整体结构没有影响,所以快.

  3. excel表中同一列相同内容进行合并

    如下图所示一张表格,如果想要把表格中相同考号的信息合并来查看的话,首先我们先通过表格的排序功能,把相同的内容先排列在一起.在数据选项卡下找到排序点就可以.   第二步,选中整个数据区域,在数据选项卡下 ...

  4. sqlite的Top筛选

    select [CollectDateTime] as '时间',[Channel_34] as '通道34',[Channel_54] as '通道54' from [DataTable] wher ...

  5. springboot部署在云服务器上

    1.window云服务器上 在本地的SpringBoot的根目录下 mvn clean package 打包jar 在云服务上安装jdk 将jar拷贝到云服务器上 在jar包所在的相应的位置,执行ja ...

  6. Win10m的前景到底在何方？

    今天晚上就是build2016的微软开发者大会了,满怀着期待. 本人一直是一名微软的粉丝,我年纪小,刚开始接触电脑的时候是win98,那时候也没怎么玩过电脑,到后来经常接触电脑的时候,所有的电脑都是w ...

  7. 【目标检测】Cascade R-CNN 论文解析

    目录 0. 论文链接 1. 概述 2. 网络结构的合理性 3. 网络结构 4. 参考链接 @ 0. 论文链接 Cascade R-CNN 1. 概述   这是CVPR 2018的一篇文章,这篇文章也为 ...

  8. php 模拟 asp.net webFrom 按钮提交事件

    由于公司需要php方面的项目开发,php刚刚入门,在写按钮提交过程中,asp.net里的按钮事件更好些.先看下面的代码, <? require_once '../inc/EventHelper. ...

  9. 如何调试nRF5 SDK

    本文将讲述Nordic nRF5 SDK的主要调试手段,以帮助大家快速定位问题,并解决问题.一般来说,你可以通过打log方式,IDE的debug模式,SDK自带的app_error_check函数,以 ...

  10. NPOI2.2.0.0实例详解(八)—设置EXCEL单元格【数字格式】

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...