Shulou(Shulou.com)06/01 Report--

This article mainly introduces "jQuery how to achieve locking page elements" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "jQuery how to achieve locking page elements" article can help you solve the problem.

Abstract

When you drag the scroll bar, lock the page elements horizontally and vertically.

Introduction

For pages with more content, we often need to lock some important elements when scrolling. These elements are often the rows or columns of a table, or they may be search criteria, or other important information.

At present, there are three main methods for locking table columns.

1. Table control

2.js generates fills such as fixtable

3.js+css

The first is the easiest way. But there are too many disadvantages of using controls, one of which is directly related to this article is that some controls have poor support for multi-level header locking.

Second, the train of thought is very clear, but the implementation is very complex and the maintenance cost is too high.

The third is the method used in this paper. At present, there are many related articles on the Internet, but the use of scenarios is too limited, there is no higher degree of abstraction to this kind of problem.

What I want is: not just the table, but as long as it is the element you want to lock, you only need to add a logo and write at most one additional line of code to complete the batch locking. And the internal implementation code should be as simple as possible.

Usage

Add style lock-col to elements that need to be locked vertically, and add lock-row to elements that are locked horizontally. Pass the id corresponding to the scrolling div in the nayiLock method.

Complete example

Lock table td, th {text-align: center; border:#dee9ef 1px solid;} jQuery (function () {nayiLock ("aDiv"); / / support locking nayiLock ("bDiv") of multi-level headers / / support locking of multiple div}) / / idfunction nayiLock (scrollDivId) {jQuery ("#" + scrollDivId) .locks (function () {var left = jQuery ("#" + scrollDivId). ScrollLeft () of scrollDivId scrolling div JQuery (this) .find (".lock-col") .each (function () {jQuery (this) .css ({"position": "relative", "left": left, "background-color": "white", "z-index": jQuery (this) .hasClass ("lock-row")? 20:10}); var top = jQuery ("#" + scrollDivId). ScrollTop () JQuery (this) .find (".lock-row") .each (function () {jQuery (this) .each ({"position": "relative", "top": top, "background-color": "white", "z-index": jQuery (this) .hasClass ("lock-col")? 20:9});});}) } span1 serial number heading 1 heading 2 1 test test 2 Test test colspan= "2" colspan= "1" order Number heading 1 heading 2 1 test test 2 test test

Note: compatibility with earlier versions of ie still hasn't found a direct solution on js. The expression method is recommended.

This is the end of the content about "how to lock page elements in jQuery". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.