首页 web前端 js教程 DIV随滚动条滚动而滚动的实现代码【推荐】_jquery

DIV随滚动条滚动而滚动的实现代码【推荐】_jquery

May 16, 2016 pm 03:05 PM
div 滚动 滚动条

记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定!

<script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> 
  <script type="text/javascript"> 
    $(function() { 
      $(window).scroll(function() { 
        var top = $(window).scrollTop()+200; 
        var left= $(window).scrollLeft()+320; 
        $("#editInfo").css({ left:left + "px", top: top + "px" }); 
      }); 
    }); 
  </script> 
 
  <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
    <div>用户名:<input type="text" /></div> 
    <div>密码:<input type="text" /></div> 
    <div>年龄:<input type="text" /></div> 
    <div>备注:<input type="text" /></div> 
    <div><input type="button" value="保存" /></div> 
  </div> 
登录后复制

以上这篇DIV随滚动条滚动而滚动的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

微软将 Windows 11 的 Fluent 滚动条引入 Google Chrome 微软将 Windows 11 的 Fluent 滚动条引入 Google Chrome Apr 14, 2023 am 10:52 AM

与 Windows 10 不同,Windows 11 具有新的现代“流畅滚动条”,当用户与之交互时会改变形状。Fluent 滚动条本质上是动态的,它们会在不同的外形尺寸或当您更改窗口大小时自动缩放,并且它目前在设置、媒体播放器等应用程序中使用。根据微软的一项新提议,谷歌浏览器可能很快就会拥有流畅的滚动条功能。微软在一份提案中表示,他们希望对 Chrome 中的旧滚动条进行现代化

JavaScript 如何实现滚动到指定元素位置的功能? JavaScript 如何实现滚动到指定元素位置的功能? Oct 22, 2023 am 08:12 AM

JavaScript如何实现滚动到指定元素位置的功能?在网页中,当我们需要将用户的视线聚焦到某个特定的元素位置时,我们可以使用JavaScript来实现滚动到指定元素位置的功能。本文将介绍如何通过JavaScript实现这一功能,并提供相应的代码示例。首先,我们需要获取目标元素的位置信息。可以使用Element.getBoundingClient

react怎么隐藏滚动条滚动 react怎么隐藏滚动条滚动 Dec 21, 2022 pm 03:38 PM

react隐藏滚动条滚动的方法:1、打开相应的“react-native”文件;2、通过horizontal设置水平滚动;3、通过设置“showsHorizontalScrollIndicator”的值为“false”来隐藏水平滚动条即可。

监测iframe的滚动行为 监测iframe的滚动行为 Feb 18, 2024 pm 08:40 PM

如何监听一个iframe的滚动,需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时,有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件,以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动,并提供具体的代码示例供参考。获取iframe元素首先,我们需要

Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法 Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法 Mar 18, 2024 pm 06:22 PM

近日有一些小伙伴咨询小编Mac系统滚动条怎么设置始终显示?下面就为大家带来了Mac系统滚动条设置始终显示的方法,有需要的小伙伴可以来了解了解哦。第一步:在系统开始菜单,选择【系统偏好设置】选项。第三步:在系统偏好设置页面,选择【通用】选项。第三步:在通用页面,选择【始终】显示滚动条。

HTML、CSS和jQuery:制作一个自动滚动的公告栏 HTML、CSS和jQuery:制作一个自动滚动的公告栏 Oct 27, 2023 pm 06:31 PM

HTML、CSS和jQuery:制作一个自动滚动的公告栏在现代网页设计中,公告栏常常被用来重要的信息传达和引起用户注意。一个自动滚动的公告栏在网页上受到了广泛的应用,它能够让公告内容以动画形式在页面中滚动显示,提高信息的展示效果和用户体验。本文将介绍如何使用HTML、CSS和jQuery来制作一个自动滚动的公告栏,并提供具体的代码示例。首先,我们需要一个HT

如何在Vue中实现全屏滚动效果 如何在Vue中实现全屏滚动效果 Nov 08, 2023 am 08:42 AM

如何在Vue中实现全屏滚动效果在网页设计中,全屏滚动效果可以给用户带来非常独特和流畅的浏览体验。本文将介绍如何在Vue.js中实现全屏滚动效果,以及具体的代码示例。为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目。在Vue.js中,我们可以使用vue-cli来快速搭建一个项目骨架。接着我们需要引入一些第三方库来实现滚动效果,比如fullpage

css怎么实现div缺一个角 css怎么实现div缺一个角 Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法:1、创建一个HTML示例文件,并定义一个div;2、给div设置宽高背景色;3、给需要删除一角的div增加一个伪类,将伪类设置成跟背景色一样的颜色,然后旋转45度,再定位到需要去除的那个角即可。

See all articles