<%@ 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. sparkR介绍及安装

    sparkR介绍及安装 SparkR是AMPLab发布的一个R开发包,为Apache Spark提供了轻量的前端.SparkR提供了Spark中弹性分布式数据集(RDD)的API,用户可以在集群上通过 ...

  2. 稍稍解读下ThreadPoolExecutor

    # 说说ThreadPoolExecutor ## 认识 先来看看它所在的架构体系: ```java package java.util.concurrent; public interface Ex ...

  3. 字符串时间与Unix时间戳相互转换

    字符串时间与Unix时间戳相互转换 /** * @Author: wangkun * @Date : 2016/1/21 13:43 * @Description : 字符串时间转换为Unix时间戳 ...

  4. 怎样利用Heartbeat与Floating IP在Ubuntu 14.04上创建高可用性设置

    提供 ZStack社区 内容简单介绍 Heartbeat是一款开源程序,负责将集群基础设施容量--包括集群成员与消息收发--交付至客户server. Hearbeat在高可用性server基础设施其中 ...

  5. Linux设备文件三大结构：inode,file,file_operations

    驱动程序就是向下控制硬件,向上提供接口,这里的向上提供的接口最终对应到应用层有三种方式:设备文件,/proc,/sys,其中最常用的就是使用设备文件,而Linux设备中用的最多的就是字符设备,本文就以 ...

  6. Java基础学习(一)---Java初识

    一.Java介绍 关于Java的诞生和发展网上比较多,在此就不再赘述了,可以参考http://i.cnblogs.com/EditArticles.aspx?postid=4050233. 1.1 J ...

  7. Android Studio设置代理,解决检查更新gradle信息的问题

    Android Studio是基于JetBrains公司的IDEA开发的,Android Studio里的项目都是由Gradle构建的,Gradle集合了Ant和Maven的优点,又解决了他们的缺点, ...

  8. 5.STM32通用定时器TIM3中断

    1.通用定时器TIM3中断 #include "timer.h" #include "led.h" void TIM3_Int_Init(u16 arr,u16 ...

  9. Solve error LNK2001 about pcl::io::vtkPolyDataToPointCloud

    When use function 'pcl::io::vtkPolyDataToPointCloud' in PCL 1.6.0, one may have error as follows: &g ...

  10. thinkphp 点击某个class提交post值，返回回来用一个弹窗插件，提示返回来要说的话

    下一篇文章有讲到弹窗插件的怎么使用,自写教程 如果能帮到你,给点个赞鼓励一下 <=============  控制器  =================> public function ...