刚打开页面效果

拖动滑动条之后效果

页面代码

<!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>

    <title></title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

        　 $("<div>").html("动态创建的div").appendTo($("#div1"));

           $("<div/>").html("动态创建的divrrrrrr").appendTo($("#div1"));

           jQuery(window).bind('scroll resize', function () {

                var scrollTop = jQuery(window).scrollTop();

                //

                if (scrollTop >= 100) {

                    //alert(scrollTop);

                    $(" .box").addClass('b_fly_fixtop');

                }

                else {

                    // alert('888');

                    $(" .box").removeClass('b_fly_fixtop');

                }

            });

      });

   </script>

   <style type="text/css">

        .contain

        {

          width:100%;

          height:50px;

          display:inline-block;

        }

        .box

        {

         height:50px;

         width:100%;

          background-color:Gray;

        }

        .b_fly_fixtop

        {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            border-top: 0;

            z-index: 900;

      }

    </style>

</head>

<body>

<div id="div1"></div>

<div class="">88888</div>

<div style=" height:100px; width:100%"></div>

<div class="contain " id="divtestyyy">

  <div  class="box "> xians</div>

</div>

<div style=" height:300px; width:100%"></div>

<div style=" height:100px; width:100%">yyyyy</div>

<div id="div1">10</div>

<div id="div2">20</div>

<div id="div3">30</div>

 <a href="www.baidu.com">百度</a>

 <a href="www.sina.com">新浪</a>

 <a href="www.qq.com">腾讯</a>

 <a href="www.taobao.com">阿狸</a>

 <div id="idouthtml">

  <div>888889999</div>

 </div>

</body>

</html>

jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示的更多相关文章

  1. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  4. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  5. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  6. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  8. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  9. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

随机推荐

  1. dubbo-admin 监控中心 部署

    dubbo-admin部署 下载: GitHub:https://github.com/search?q=dubbo-admin 百度网盘: 链接:https://pan.baidu.com/s/1v ...

  2. pyinstaller 打包生成的exe文件，在其他电脑上报错

    解决方法: 1.第一种情况,在打包的时候不要加参数-w,看一下执行exe文件后出现的报错再看下一步的行动 2.应该是需要装一个VC 2015 x64(下载地址:https://www.microsof ...

  3. cl.exe 命令行编译sqlite3 sqlite3.dll及sqlite3.exe

    有点被宇宙最强的ide惯坏了,封装的太好,不能像gcc那样一步步了解其原理,其实强大的vs背后也有类似gcc的cl.exe 看到How To Compile SQLite http://sqlite. ...

  4. 20145328 《Java程序设计》第4周学习总结

    20145328 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 继承也符合DRY(Don't Repeat Yourself)原则 ISA与O ...

  5. 20135320赵瀚青LINUX第一章读书笔记

    第一章-Linux内核简介 Unix的历史 依旧被认为是最强大和最优秀的系统 由一个失败的操作系统Multics中产生 被移植到PDP-11型机中 由其他组织进一步开发 重写了虚拟内存系统,最终官方版 ...

  6. [专业亲测]Ubuntu16.04安装Nvidia显卡驱动（cuda）--解决你的所有困惑【转】

    本文转载自: 因为要做毕设需要安装caffe2,配置cuda8.0,但是安装nvidia驱动真的是把我难倒了,看了很多篇博文都没有效果,现在我自己重新总结了下几种 安装方法(亲测有效),希望能帮到大家 ...

  7. 设置iframe内表单target属性以兼容IE、Firefox【转载】

    设置iframe内表单target属性以兼容IE.Firefox[转载] 2011年11月19日 haibor       今天有客户反应,在一产品网站的资源下载页面,用户登录提交后页面无反应! 经测 ...

  8. [BZOJ1722]Milk Team Select 产奶比赛

    Description Farmer John's N (1 <= N <= 500) cows are trying to select the milking team for the ...

  9. CentOS 7 Firewalld 常用操作

    1.简介 Zone 级别 drop: 丢弃所有进入的包,而不给出任何响应block: 拒绝所有外部发起的连接,允许内部发起的连接public: 允许指定的进入连接external: 同上,对伪装的进入 ...

  10. 自学Java测试代码二String， StringBuffer

    2017-08-23 10:38:01 writer:pprp package test; import java.util.*; public class test2 { public static ...