$(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. eclipse +maven+ssm搭建矿建

    记录一下搭建框架的过程1.下载最新的eclipse   https://www.eclipse.org/downloads/download.php?file=/oomph/epp/neon/R/ec ...

  2. PHP JSON

  3. PHP function

  4. mysql连接的一些问题。

    最近网站出现 User 数据库名称 has already more than 'max_user_connections' active connections 的报错,网站瘫痪.有必要研究下这个问 ...

  5. unity自带寻路Navmesh入门教程(三)

    继续介绍NavMesh寻路的功能,接下来阿赵打算讲一下以下两个例子,先看看完成的效果:   第一个例子对于喜欢DOTA的朋友应该很熟悉了,就是不同小队分不同路线进攻的寻路,红绿蓝三个队伍分别根据三条路 ...

  6. table清除样式大全

    table{width:100%;text-align:center;border-collapse:collapse;border-spacing:1;border-spacing:0; }tabl ...

  7. comparator接口与compare方法的实现

    刷leetcodecode时看到一道题需要利用自定义的比较器进行排序,最开始一头雾水,看了API终于懂了~ Arrays.sort(T[] a,Comparator<? super T>  ...

  8. java中参数传递方式

    在 Java 应用程序中永远不会传递对象,而只传递对象引用.因此是按引用传递对象.Java应用程序按引用传递对象这一事实并不意味着 Java 应用程序按引用传递参数.参数可以是对象引用,而 Java ...

  9. Centos启动Cassandra交互模式失败:No appropriate python interpreter found

    在CentOS6.5安装好Cassandra后,启动交互模式: bin/sqlsh 192.168.10.154 时,报错 No appropriate python interpreter foun ...

  10. IDE编辑器编码配置

    做跨平台开发时,大家用不同的IDE合作开发,最令人头疼的事就是各种乱码问题. 常用的IDE都支持utf-8编码和unix格式行尾'\n'. 1.XCODE设置文本编码及换行Xcode >> ...