$(function(){
  //获取要定位元素距离浏览器顶部的距离
  var navH = $(".win").offset().top;
  //滚动条事件
  $(window).scroll(function(){
    //获取滚动条的滑动距离
    var scroH = $(this).scrollTop();
    //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
    if(scroH>=navH){
      $(".win").css({"position":"fixed","top":0});
    }else if(scroH<navH){
      $(".win").css({"position":"absolute","top":200,"right":70});
    }
  });
});

Jquery DIV滚动至浏览器顶部后固定不动代码的更多相关文章

  1. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

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

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

  3. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  4. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  5. jquery页面滚动,菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  6. div固定在浏览器的最上方,不随滚动条滚动

    #topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...

  7. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  8. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

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

  9. JQuery Div scrollTop ScrollHeight

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

随机推荐

  1. 关于GRUB2

    grub2启动引导 GRUB 2是GNU GRUB(GRand Unified Bootloader)的最新版本.bootloader(引导程序)是计算机开机后(bios自检之后)第一个运行的软件程序 ...

  2. iOS开发 贝塞尔曲线

    iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00  博客园-所有随笔区 原文  http://www.cnblogs.com/moyunmo/p/ ...

  3. Nginx的第一个模块-HelloWorld

    麻雀虽小,五脏俱全,小小的Hello World盛行于程序世界,就在于其代码虽短,但要真正运行起来,需要我们略通基本语法,稍懂编译运行环境,知晓操作过程,最后,还有一颗持之以恒,不怕折腾的心.前一阵子 ...

  4. <css篇>关于页面的绝对定位与相对定位,且支持页面各元素自适应

    (哈哈,第一次写博客,简称处贴?主要记录下平时工作中遇到的问题及其解决方案,方便以后解决此类问题.) 话不多说,上代码看吧 代码有点乱,以后自己能看得懂就行咯 <body > <di ...

  5. nginx学习记录/2016.11.14

    nginx(engine X)是一个高性能的web服务器和反向代理服务器以及电子邮件代理服务器 由俄罗斯的程序设计师Igor Sysoev所开发 nginx+tomcat实现负载均衡 参考地址:htt ...

  6. node.js基础 1之 HTTP事件回调进阶(HTTP模块)

    HTTP概念进阶 1. 什么是回调? 回调是异步编程时的基础,将后续逻辑封装成起始函数的参数,逐层嵌套 2. 什么是同步/异步? 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯 ...

  7. python——SQL基本使用

    终于学到数据库操作了,这意味着什么?以后再也不用从文件里读写数据了,过程实在太复杂了~~~为了纪念这个激动人心的时刻,一定要写一篇博客! 使用mysql数据库——增 插入一条数据 首先,还是先解释一下 ...

  8. 商业信息管理系统 Bizagi 建模pattern

    WCP 1- Sequence This pattern is used to model dependencies between tasks so that one task cannot sta ...

  9. 不刷新页面获取HTML进行显示

    $.ajax({ url: "请求地址",          dataType: "text",         type: "GET"   ...

  10. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...