Home Web Front-end JS Tutorial Implementation code for DIV to scroll as the scroll bar scrolls [Recommended]_jquery

Implementation code for DIV to scroll as the scroll bar scrolls [Recommended]_jquery

May 16, 2016 pm 03:05 PM
div scroll scroll bar

I remember that writing this kind of code used to be troublesome, but now it’s much easier with JQuery. It only takes a few lines of code!

<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> 
Copy after login

The above implementation code for DIV to scroll as the scroll bar scrolls [recommended] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome Microsoft brings Windows 11's Fluent scrollbars to Google Chrome Apr 14, 2023 am 10:52 AM

Microsoft brings Windows 11's Fluent scrollbars to Google Chrome

How to hide scroll bar scrolling in react How to hide scroll bar scrolling in react Dec 21, 2022 pm 03:38 PM

How to hide scroll bar scrolling in react

How to implement scrolling to a specified element position in JavaScript? How to implement scrolling to a specified element position in JavaScript? Oct 22, 2023 am 08:12 AM

How to implement scrolling to a specified element position in JavaScript?

Monitor iframe scrolling behavior Monitor iframe scrolling behavior Feb 18, 2024 pm 08:40 PM

Monitor iframe scrolling behavior

HTML, CSS, and jQuery: Make an auto-scrolling bulletin board HTML, CSS, and jQuery: Make an auto-scrolling bulletin board Oct 27, 2023 pm 06:31 PM

HTML, CSS, and jQuery: Make an auto-scrolling bulletin board

How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show Mar 18, 2024 pm 06:22 PM

How to set the scroll bar to always show on Mac system - How to set the scroll bar to always show

How to use css to realize that a div is missing a corner How to use css to realize that a div is missing a corner Jan 30, 2023 am 09:23 AM

How to use css to realize that a div is missing a corner

Implementation of word-marking translation browser script based on ChatGPT API Implementation of word-marking translation browser script based on ChatGPT API May 01, 2023 pm 03:28 PM

Implementation of word-marking translation browser script based on ChatGPT API

See all articles