<%@ 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. form表单下的button按钮会自动提交表单的问题

    form表单下的button按钮会自动提交表单的问题 2017年01月05日 18:02:44 蓝色水 阅读数:18012更多 个人分类: asp.net   form表单下的按钮在没有指定type类 ...

  2. 【bootstrap组件】几个常用的好用bs组件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  3. Java知多少（45）未被捕获的异常

    在你学习在程序中处理异常之前,看一看如果你不处理它们会有什么情况发生是很有好处的.下面的小程序包括一个故意导致被零除错误的表达式. class Exc0 { public static void ma ...

  4. 有趣的JavaScript原生数组函数

    本文由 伯乐在线 - yanhaijing 翻译.未经许可,禁止转载!英文出处:flippinawesome.欢迎加入翻译小组. 在JavaScript中,可以通过两种方式创建数组,Array构造函数 ...

  5. 02工厂方法模式FactoryMethod

    一.什么是工厂方法模式 工厂方法模式同样属于类的创建型模式又被称 为多态工厂模式 .工厂方法模式的意义是定义一个创建 产品对象的工厂接口,将实际创建工作推迟到子类当中. 核心工厂类不再负责产品的创建, ...

  6. iOS 判断App启动方式

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  7. css---计算页面的的宽度和长度

    我们在写前端页面的时候,会遇到这样的情况,就是一个div设置宽度100%,设置左右边距10像素,这样的布局,在里面嵌套的div的宽度设置100%,这样写的话,里面的宽度是和外面的宽度一致的,同样是10 ...

  8. ELK之elasticdump迁移es数据

    参考:https://www.cnblogs.com/resn/p/9082663.html elasticsearch部分查询语句 获取集群节点列表 curl "172.16.30.55: ...

  9. API（二）之Requests and Responses

    这一部分可以让返回的api信息以两种格式呈现:.json和.api REST框架的核心部分.我们来介绍几个基本的组成部分. Request objects REST框架引入了Request对象来扩展常 ...

  10. 洛谷P1098 字符串的展开【字符串】【模拟】

    题目描述 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或者“4-8”的字串,我们就把它当作一种简写,输出时,用连续递增的字母或数 ...