<%@ 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. 深度学习的batch_size

    知乎讨论: https://www.zhihu.com/question/61607442/answer/204675996 案例一 http://www.myzaker.com/article/5a ...

  2. Wifi 开放系统认证和共享密钥身份认证

    记录开放系统认证和共享密钥认证的区别. 开放系统身份认证(open-systern authentication) 是802.11 要求必备的惟一方式. 由行动式工作站所发出的第一个帧被归类为auth ...

  3. [PHP] 01 - Hypertext Preprocessor

    超级文本预处理语言:http://php.net/ 集成的服务器组件,它已经包含了 PHP.Apache.Mysql 等服务 PHP 7 https://www.tutorialspoint. com ...

  4. bootstrap入门基础

    1.字体 text-left text-center text-right text-lowercase 小写 text-uppercase 大写 text-capitalize 首字母大写 2.表格 ...

  5. 13组合模式Composite

    一.什么是组合模式 Composite模式也叫组合模式,是构造型的设 计模式之一.通过递归手段来构造树形的对象结 构,并可以通过一个对象来访问整个对象树. 二.组合模式的结构 三.组合模式的角色和职责 ...

  6. 学 shell (1/5)

    假设这是某脚本 x.sh 的内容,使用 sh x.sh arg1 来执行该脚本 #!/bin/bashcd `dirname $0`/..source scripts/status.shstart $ ...

  7. MySQL临时表创建及旧表建新表

    1.创建临时表 临时表是一张表,用来临时保存一些数据 特点: 只对创建该临时表的用户可见: 当会话结束时,MySQL自动删除临时表. 临时表的核心:建表和删表消耗资源极其少 创建临时表的基本格式: C ...

  8. 【代码审计】XIAOCMS_后台database.php页面存在SQL注入漏洞

      0x00 环境准备 XIAOCMS官网: http://www.xiaocms.com/ 网站源码版本:XiaoCms (发布时间:2014-12-29) 程序源码下载:http://www.xi ...

  9. textarea 固定大小，滚动条，限制拖动，文字对齐

    取值:$("#ID").val(); 控制大小:加width,height限制(style="width:100px;height:200px;");或row, ...

  10. The Salt Master has cached the public key报错解决办法

    参考:http://www.52devops.com/chuck/814.html 查看salt-minion的运行状态,显示salt-master已经缓存了这个minion,但是minion在重新认 ...