<!doctype html>

<html>

<style>

    body{

        margin:;

        padding:;

    }

    #top{

        background:#;

        width:400px;

        height:30px;

    }

    .a{

        position:fixed;

        top:;

        left:;

    }

</style>

    <body>

        <div style="height:300px;width:100%;background:#ccc;">

        </div>

        <div id="top">

        </div>

        <div style="height:1900px;">

        </div>

        <script>

        window.onscroll=function(){

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

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

            if(t > ){

                var A = Otop.offsetHeight+Otop.offsetTop;

                Otop.style.position='fixed';

                Otop.style.left='';

                Otop.style.top='';

            }else{

                Otop.style.position='';

            }

        }

        </script>

    </body>

</html>

javascript 滚动条下拉导航fixed的更多相关文章

  1. Javascript下拉导航

    1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...

  2. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  3. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  4. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  5. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  6. tab切换中的滚动条下拉分页带来的问题

    相信做过tab切换中滚动条下拉分页的童鞋都知道,我们在用scroll方法来做滚动条下拉分页的时候,都是有bug,切换中间的内容会互相影响,为了解决这个问题,我总结了2种方法: 1.方法一: <! ...

  7. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  8. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  9. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

随机推荐

  1. haskell 开发环境配置

    haskell是一门通用函数式语言,几乎可以进行任何种类的开发,包括命令行,GUI,数据库,Web.源代码可以跨平台: Linux,Mac, Windows, FreeBSD 等. haskell特点 ...

  2. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  3. POJ1163——The Triangle

    Description 73 88 1 02 7 4 44 5 2 6 5 (Figure 1) Figure 1 shows a number triangle. Write a program t ...

  4. 解读sample3

    说明 理解被测试代码 理解测试代码:test fixture简介 编写fixture class TEST_F宏 其他 不应该被忽略的注释 说明 被测试代码文件 sample3-inl.h 测试代码文 ...

  5. Java并发编程：ThreadLocal

    Java并发编程:深入剖析ThreadLocal   Java并发编程:深入剖析ThreadLocal 想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用 ...

  6. XCode5/Apple LLVM 5.0下使用boost的方法

    Because Apple changes the compiler to llvm only in XCode5, so there are some compatible problems wit ...

  7. 初次使用cocoapods注意事项

    在仅仅用cocoapods时可能会遇到各种各样的错误和问题 这里中总结下: 1.首先使用cocoapods有非常多优点,在github上非常多优秀的开源项目都用到了它;假设你不会使用它,那么非常多优秀 ...

  8. [ES6] Converting an array-like object into an Array with Array.from()

    Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. ...

  9. [转] .bss段和.data段的区别

    PS:http://stackoverflow.com/questions/16557677/difference-between-data-section-and-the-bss-section-i ...

  10. 大数据笔记03：大数据之Hadoop的安装

    1.安装Hadoop (1)准备Linux环境 (2)安装JDK (3)配置Hadoop 2.准备Linux环境 (1)我们用户可能都是使用Windows环境,一般用户都是先安装虚拟机,然后在虚拟机上 ...