<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="菜单栏在页面顶部.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function(){  

            //获取要定位元素距离浏览器顶部的距离  

            var navH = $(".hb").offset().top;

            //滚动条事件  

            $(window).scroll(function () {

                //获取滚动条的滑动距离  

                var scroH = $(this).scrollTop();

                //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定  

                if (scroH >= navH) {

                    $(".hb").css({ "position": "fixed", "top": 0 });

                } else if (scroH < navH) {

                    $(".hb").css({ "position": "static" });

                }

            })

      })

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div class="hb" style="height:100px;width:100%;background:#9966FF">移动到顶部固定不变</div>

    <div style="background:#003366;height:500px;">空div</div>  

    <div style="background:#ff0000;height:1500px;">空div</div>

    <div style="background:#ccc;height:1500px;">空div</div>  

    </form>

</body>

</html>

div总在页面最顶端的更多相关文章

  1. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  2. 使用Div + CSS布局页面

    在设计网页时,能够控制好各个模块在页面中的位置是非常关键的.本章将讲解利用Div+CSS对页面元素进行定位的方法. Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象. ...

  3. div填满页面剩余空间的方法

    想让div填满页面剩余空间,最简易的方式还是靠提前的布局. 这里提供两种方法: (1)利用 height 样式的%比例设置布局 <!DOCTYPE html> <html lang= ...

  4. div滚动到页面顶端后固定住

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  6. div中显示页面

    在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式. <script type="text/javascript"> ...

  7. js把div固定在页面的右下角

    在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的. 一开始,以为用position:fixed,一句css就可以完成,结果在iframe ...

  8. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

  9. 移动端：div在手机页面上随意拖动

    <!doctype html> <html> <head> <title>弹窗</title> <meta charset=" ...

随机推荐

  1. 卷积、矩阵乘积、高斯模糊滤波（降噪）、空域计算（2D卷积计算）、频域计算（FFT）的理解

    矩阵乘积:对应行列对应元素相乘的和组成新的矩阵 两个矩阵的乘法仅当第一个矩阵A的列数和另一个矩阵B的行数相等时才能定义.如A是m×n矩阵和B是n×p矩阵,它们的乘积C是一个m×p矩阵 并将此乘积记为: ...

  2. Asp.net Daily Build by MsBuild

    :: 目录结构:: +GW.Point.BLL --dir dll:: +GW.Point.IBLL --dir dll:: +GW.Point.DAL --dir dll:: +GW.Point.I ...

  3. 蓝牙mesh介绍

    了解一下关于蓝牙Mesh的知识. 蓝牙mesh网络使用,并且依赖于低功耗蓝牙(BLE).低功耗蓝牙技术是蓝牙mesh使用的无线通信协议栈. 蓝牙BR / EDR能够实现一台设备到另一台设备的连接和通信 ...

  4. 手动添加jar包到本地maven仓库（已测）ok

    很多时候我们需要的jar包在maven仓库上没有 我们可以自己找到这个jar包,但是怎么通过在pom文件配置使用呢? 需要我们手动将本地的jar包添加到本地maven仓库. 前提是已经配置好maven ...

  5. python使用上下文对代码片段进行计时，非装饰器

    之前发过了一组常用的装饰器,包括了一个where_is_it_called的装饰器,可以计时和对入参和返回结果,被何处调用进行记录,十分强大. 这是用上下文,上下文的好处是,不需要抽成函数才能计时. ...

  6. Java基础复习笔记基本排序算法

    Java基础复习笔记基本排序算法 1. 排序 排序是一个历来都是很多算法家热衷的领域,到现在还有很多数学家兼计算机专家还在研究.而排序是计算机程序开发中常用的一种操作.为何需要排序呢.我们在所有的系统 ...

  7. Celery第一步

    一. Celery的架构图: task producer - 任务生产者 顾名思义就是发起调度任务的,然后交给任务队列去处理.简单的Python代码.耦合在Django/Flask Web 服务里请求 ...

  8. cocos2d-x游戏引擎核心(3.x)----事件分发机制之事件从(android,ios,desktop)系统传到cocos2dx的过程浅析

    (一) Android平台下: cocos2dx 版本3.2,先导入一个android工程,然后看下AndroidManifest.xml <application android:label= ...

  9. php程序调试方法

    可以参考鸟哥等人写的的"php调试技术手册.pdf" 主要分为内置api调试包括:echo.var_dump.print_f,error_log等 前端浏览器插件辅助调试 开源扩展 ...

  10. Failed to resolve: com.android.support:appcompat-v7:27.0.1问题解决

    今天,在毫无征兆的情况下AndroidStudio又抽风了,搞了大半天,试了网上众多方案,终于解决了这个问题.咱们一步一步来 第一步:这是最开始的bug Error:Failed to resolve ...