$(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. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  2. web 打开子窗口提交数据或其他操作后 关闭子窗口且刷新父窗口实现

    父页面 : html连接:<a href="javascript:void(0)" onclick="window.open(子页面URL)">js ...

  3. java: system.gc()和垃圾回收机制finalize

    System.gc()和垃圾回收机制前的收尾方法:finalize(收尾机制) 程序退出时,为每个对象调用一次finalize方法,垃圾回收前的收尾方法 System.gc() 垃圾回收方法 clas ...

  4. angular中动态添加的元素绑定事件问题

    $compile http://segmentfault.com/q/1010000000726448/a-1020000000727088 接口下载问题

  5. 添加as源码

    http://blog.csdn.net/zhang31jian/article/details/23258065

  6. 用Nginx+Lua(OpenResty)开发高性能Web应用

    在互联网公司,Nginx可以说是标配组件,但是主要场景还是负载均衡.反向代理.代理缓存.限流等场景:而把Nginx作为一个Web容器使用的还不是那么广泛.Nginx的高性能是大家公认的,而Nginx开 ...

  7. HEAD FIRST HTML & CSS学习笔记

    CSS部分 1. border-bottom属性控制元素下边框的外观.   eg: border-bottom:1px solid maroon;  P265 下划线 text-decoration: ...

  8. uiimage 上传 数据库

    之前我所接触的上传图片都是直接与服务器交互的,即 app端要做的就是上传到服务器 现在这个项目却是app先上传到"数据库",由"数据库"传到服务端 下面说主题 ...

  9. Windows Store App JavaScript 开发:页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  10. Eclipse快捷键汇总

    [ALT+/] 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2 [Ctrl+O] ...