Using jquery to transform the position of the search box

Now a lot of sites have such an effect: when the user searches for information, scrolling content, the position of the search box will change, will be fixed in a location, convenient for users to search again. such as Baidu Pictures. In order to improve the user experience of the system, but also want to join this effect, after a small period of time groping, the basic realization. Code is relatively simple, mainly CSS JS control. Specific as follows

1.css

Part, mainly set two styles, scroll before, after scrolling.

/* */.fossilinfohead{width:40% before rolling    ;    border-radius:2px;       min-width:500px;} /* After scrolling, the search box position */.fossilinfoheadnew {    position:fixed;   top:3px;    z-index:5001;    Background-color: #F5F5F5;}

　　

2.js section. The main is to control good CSS

The use of both styles. The code is as follows:

/* Set the position of the search box */        $ (' #fossilInfoContainer ') when the picture is scrolled. Unbind (' scroll '). Bind (' scroll ', function () {            var scrolltop = $ (this). ScrollTop ();            var target = $ ('. Fossilinfohead ');            if (scrolltop >=) {                target.addclass (' fossilinfoheadnew '). CSS (' right ', ' 72px ');            } else {                Target.removeclass (' fossilinfoheadnew ');            }        );

The main code is such a few, but do not know whether Baidu is so realized, we can study under.

Using jquery to transform the position of the search box