An example of creating a dynamic banner in HTML. If you don't know HTML, put the code for the banner. Add banner to ADFOX

HTML5 banners

incl. 2299 rub.

In today's time, HTML5 banners are the only current format for fully animated banner ads. This universal cross-platform format has been replaced by Flash-banners, which made a number of borders and shortcomings.

The main reasons for such behavior are as follows:

• to Flash-technology, claims have accumulated in the field of computer security and increased processor fatigue of mobile devices;
• some browsers started blocking the display of Flash for blocking;
• on the mobile outbuildings iOs (iPhone, iPad) displaying of Flash letters is not transmitted by the virobnik;
• popularity of blocker programs in banner Flash-advertising;
• Vіdmova vіd podshої pіdtrimki i razvitie Flash-tehnologii її її vlasnik, company Adobe.

Animated HTML5 banners can be shown without borders in any browser, on the screen, I will attach any, including smartphones, tablets and media TV. At whom polygaє їх cross-platform and versatility.

For the brand name manager, HTML5 banners mean we're going to expand our audience without spending money.

What can an HTML5 banner be?

What a bagat. Even the most advanced format, which brings the respect of the coristuvach and navit vzaimodiє with him (interactive banner).

From the point of view of animation, such a banner can show vector animation (without scaling), animation of characters, photos, logotypes, graphics and diagrams, text and display 3D animation. From the point of view of interactivity, HTML5-banner can react to diversification and propagate to you additional content and feasibility. From the point of view of media-carrying, HTML5-banner can play video, slide and audio recordings. From the point of view of adaptability, an HTML5 banner can stretch to the full width of the side, expand the add-on panel, or expand to the full screen.

Let's take a look at the main types of HTML5 banners.

Animated HTML5-banner of a fixed size.
The most popular format for most advertising media. The width and height of the required banners are selected from the list of those accepted before placement. We always show the widest expansion.

Stretch HTML5-banner (adaptive, gumovy).
This is a banner, which can be stretched, occupying the entire width (and height) of the screen. (The report can be found in this article)

Fullscreen HTML5 banner.
The banner is displayed on the whole screen. As a rule, set the timer to display that "Close" button. Particularly popular for display on mobile extensions.

Often such a banner can be adaptive with the adjustment of different orientations and allow a mobile attachment.

HTML5-banner (explode) that pops up.
There is only a start panel of such a banner (teaser) on the screen. Under the hour of waiting for the given algorithm (pointing the bear or pushing, the timer, or otherwise, on the side), another part of the banner is displayed with additional extended information.

HTML5 Video banner.

You can also show a video clip, like from an autostart, and after pressing the “Play” button. You can take revenge on the buttons and turn off the sound. The video file will be hosted on external hosting and will be taken for an hour of showing.

Game interactive banners.
Baneri, yakі call koristuvacha turn on at the group, vykonuyuchi simple diy.

Such banners turn the respect of the target audience, call out a lively interest, and at the same time make a low boundary (for example, the presence of a mouse on mobile outbuildings or the exchange of additional scripts). We will tell you for sure about the special features of the vipadka, as you have decided to create a playable HTML5 banner.

Smart HTML5 banners (calculators).
Vykoristovuyutsya for zaluchennya and vzaєmodії z koristuvachem, proponuyuchi yoma negainok razrahunok for the required parameters and the formula given by the internal algorithm (for example, rozrakhunok loan, mortgage, vitrati budmaterialіv and other clumsy operations).

HTML5 banner editing– in some cases, the deputy needs to promptly make changes to the banners, without going into the help of the retailer (for example, prices, vodsotki or quotation, which are often changed). We can go through such tasks and enter the necessary parameters directly to the banner HTML code, where the manager can independently make changes. It is possible to request a better decision on how to see the data, victorious with a banner, at the old files.

HTML5-banners, which are used to improve existing data and API.
At the moment, there are a lot of advertising banners to block the banner up to old dzherelam. However, as the banner is placed on the site, which gives it such a possibility, the HTML5 banner can request the necessary information (text, numbers, quotes) to the site via the API, which is processed after the given algorithm, show the correct information.

3D HTML5 banners.
Such banners turn the respect of the coristuvach, creating an ob'emnі model of the image on the side.

HTML5 3D banner can be implemented in view of the object, which wraps, the edges of the banner frame, in the view of the book, which is opened, or other 3D effects.

Please note that the HTML5 banner can include a couple of feature descriptions. For example, a video banner can stretch across the entire width of the side, and a trivi- mer animation can be played on the side in a fallow way.

If you want to create an HTML5 banner on our site, and if a creative idea uses a mix of different formats, then give strength to our fahivtsy.

HTML5-banner - what is your own and technically?

Correctly take HTML5 banner as a mini-site. Without interruption.

HTML5, what naming it banner formatє my layout of web-sides, simpler kazhuchi, layout. І verstaєtsya according to the same laws, what a modern site. Vіn can replace div-containers, fonts, which are connected, css styles and js script. The head element is the canvas animation container. The animation itself is realized with help java script, most of which are specially developed for animation js-libraries.

What is there in the middle? New in the archives? Why so many files?

Aje mi zvikli, scho banner - tse one image file JPG or "gifka" or "flash drive". But guess what, as we wrote earlier, the HTML5 banner is, in fact, a mini-site. Vіn mіstіt anonymous files and it is delivered to the advertising maidan in zip-archive. The middle archive contains the head HTML file, java script files, libraries, style sheets and images.

Note. For some types of advertisements, you can use the whole banner in one file, adding all scripts and images in base-64 format. This is not a problem for a certified retailer. However, such an increase in the term of the preparation of the banner and the introduction of a new change can help. Luckily, such a vimoga trapleyaetsya infrequently.

How can I see HTML5 banner ads on my computer?

Kind of simple. Unpack the zip-archives and open the file, which is in the middle of the HTML, in your browser.

How can I guess that I created a valid HTML5 banner?

Like a banner is created for advertising Google services, then to your services is a miracle tool for checking the quality of a designer's work - an on-line HTML5 validator from Google. It's easy to use it: grab your zip-archive with a banner and wonder if you've passed the checklist. Pardons will be marked with red badges. Yakshcho їх nemaє - your retailer is not free and the banner is ready to be placed Google AdWords or Double Click.

For advertising networks Yandex, Mail.ru, Rambler, adFox, adRiver and others, there is also a re-verification for the banner's validity to the technical support after it is attracted to the system's website. If you have problems, you can take the moderator's comment with a description of the pardon. Deyakі maidanchiki give the deputy of advertising the opportunity forward revision banner on the test side.

And yet, the best guarantee of the correct preparation of the HTML5 banner is the approval of the retailer, and the knowledge of the technical means of advertising maydanchikiv, and the readiness to promptly correct the pardons.

And a banner with animation in Java Script - why else?

Don't let yourself get confused. "Java Script banner", "Canvas banner" - go for yourself about those that are commonly called "HTML5 banner". The js-library or layout rules can be changed directly in the retailer's tool, but the general selection scheme is filled with the same one.

How to create an HTML5 banner?

The most popular middleware designer for creating HTML5 animations Adobe program Animate.

Google promotes its own development tool - Google Web Designer. Among other pluses is the presence of faceless templates and the possibility of publishing a banner without intermediary for Google advertising services: adWords and Double Click. Among the minuses is the reduction of the possibility of animation.

Acting designers, mostly American, are the editor of the Green Sock Animation Platform library. Prote, we don’t have a stink of significant width.

Vrakhovuchi everything required components be themselves open code, a good specialist can create an HTML5 banner for the simplest text editor. However, such a method is not effective, it is comparable with professional animation programs.

Technical support for HTML5 banners.

Wimogs hustle:

• headline HTML5-banner at kb.;
• zip-archive structure, number of folders and files;
• list of allowed file formats;
• the method of enabling URL-sending on a click on a banner (banner firmware);
• transfer of allowed js-libraries on external hostings;
• the order and exchange of connection of video and audio files;
• Imogi before the design of the frame, disclaimers, frequency and number of cycles of animation, I will add on to the processor.

I'm far from new translation we could, as it were, be able to cheat our retailers, so that we could send an HTML5 banner to the manager, getting ready for the launch of the advertising campaign without hiccups.

What should I do with my Flash-banners created earlier?

See for yourself - most advertising media no longer accept Flash-banners before placement, Flash-components are blocked in browsers and on iOs devices, pinning their Swiffy robot (the only adequate on-line Flash-banner converter for HTML5).

Automatic conversion from Flash format to HTML5 is practically impossible - it is necessary, in fact, to manually convert HTML5 editors. In such a situation, the correct decision would be to create a new set of animated banners, universal format HTML5.

And what about “gifs”?

It is necessary to understand what a GIF-animation is - the last set of pictures of frames, like in video files. A GIF file can contain information about the speed of frame processing and the number of repetitions. Tsim Yogo Mozhlivostі obmezhuyutsya.

GIF banner is not acceptable vector graphics, create animation programmatically, adapt to required rosemary and a lot of other things that HTML5 banner animations can easily handle.

What does advertiser mean?

The problem of supra-world vaga. So, їy skhilnі navit banery. All the great advertisements of the Maidan show up just a few banner ads in kilobytes.

A GIF banner is good for showing a few static frames, maybe with a small text animation, or buttons to change photos. For this reason, the GIF-banner should not go beyond the limits of advertising maidanchiks.

As the animation begins to change a few hundred frames, then the gif-banner will grow, as if it were English, "dramatically", that is dramatic. A 20-second gif with a lot of megabytes is on the right. And it doesn't fit with advertising merezhas, as it is rightly turbovanі tim, sіlki trafіku happen to zavantazhit koristuvachevі for revisiting the banner.

Also, if you need a banner with faceless animation effects, character animation, an interactive, adaptive or video banner - choose an HTML5 banner for the most difficult.

Adaptability- this is one of the most important criteria for sites that are created at once. Rich corystuvachіv vikoristuyut screens mobile phones to review web resources. Websites can often display banner ads, and traditional banner ads are not gummy. Flash and animated GIF-banners can fix the size of the pixels, so the stench is not the same with today's adaptive layouts.

We need new way create a banner ad.

We need adaptive banners …

New format for banner ads

The only way to create banner ads is as weird as our HTML5 layouts, but it can also be done with HTML5. More often than not, it may sound like a divine idea, but I sing you, but it’s not like that. Actually, there are many advantages for advertising in HTML.

• HTML voiceover is now available, and the semantic rozmіka to rob them with summіsnym with different permissions.
• Text, images, video, Javascript and form You can be featured in the banner as it is, as if it were a web site.
• Banners can twist dynamic server scripts that bazi danikh, as it is necessary.
• HTML omissions can take up little disk space.
• Banner maintenance is just the same as web hosting.
• Hi new technologies for web retailers- Vaughn is the same, like a web development.
• and splendidly, HTML5 voiceovers can be adapted to any size with help of CSS3 media- all that we need for adaptive banners!

Otzhe, how can we spawn strange advertising?

The only trick is to make the iframe dynamically expand for the help of CSS3 media, I'll tell you about three things a year ... But basically everything!

We marvel at how it works

The axis of the stock HTML5 render, shown in popular size 125×125 pixels:

And the axis is the same goloshennya with a crooked width:

Respect, as a reaction to another advertising slander, if you change the window size of your browser ... Dosit cool! 🙂

Responsive layouts will change, so that the elements of the side are small to change the width, which is now the responsibility of the banners to trim the width of the window.

The height of the banner is not of great importance in adaptive design, so we can change the height, as it suits us. Ale vibir height does not mean that the voice is stuck on this height, we can designate a sprat of height for the skin voice of the voice!

In order to ensure a healthy summation, adaptive voicing of guilt, to set the same height of pixels, as well as traditional banner layouts.

Theoretically, we could create adaptive banners, albeit working out of whatever width or height, but it's impractical for creating tests.

I am advocating for the minimum width of 88 pixels and the mother of the offensive set of standard heights:

• 31px "micro"
  microbar (88 x 31)
• 60px "button"
  button 2 (120 x 60)
  support banner (234 x 60)
  top banner (468 x 60)
• 90px "banner"
  button 1 (120 x 90)
  leaderboard (728 x 90)
• 125px "small rectangle"
  square button (125 x 125)
• 250px "middle rectangle"
  vertical banner (120 x 240* finish close!)
  square splicing window (250 x 250)
  middle rectangle (300 x 250)
• 400px "great square"
  vertical rectangle (240 x 400)
• 600px "hmarochos"
  hmarochos (120 x 600)
  wide hmarochos (240 x 600)
  publicity on p_vstorinki (300 x 600)

With pixel heights, as I have chosen more, give us a wide vertical range and a variable width, we cover the most popular sizes of banner ads, as they are victorious today. Obviously, just like traditional banners, you can create non-standard sizes as you need them.

Not only that, but my demo banner ad is a total cost of less than 25 KB (HTML, CSS and JPG image). Less than the maximum file size for one small banner!

Try these new banner resizes for additional adaptive voice overscanning software.

Changing the frame rate for CSS media support

Sometimes you need a responsive height for ads, for which you need to change the iframe size for additional CSS media. I care what shortest way expand - set iframe width and height equal to 100% and place them in a div with specific CSS sizes. The axis looks like this:

A axis i css:

/* default height */ #ad ( height:60px; ) @media only screen and (height:90px) ( /* 90 pixels high */ #ad ( height:90px; ) ) @media only screen and (height:125px ) ( /* 125 pixels high */ #ad ( height:125px; ) )

Shows and clicks

Best in HTML5 voiceovers - you can view them with help Google Analytics, like on great websites.

Zrobimo advertising banner for help with CSS3. In this hour, I will be adding CSS3 animations only Firefox browsers and WebKit. Ale dosit just zmusiti banner pratsyuvati in other browsers. Prote, after experimenting with new CSS techniques (especially in IE 7 and older) to see the miraculous functionality.

Note: To save time on the side, all prefixes of the browser browsers are omitted. Look at the code in the output records.

HTML markup

Let's take a look at the structure of the HTML banner. At this stage, it is my responsibility to show how the animation functions:

For a better understanding of the outline structure, we focus on the body:

There are three animations in general:

Vislizuvannya chovna evil. Stops for an unordered list (group).

Imitation of rozgoduvannya chovna on the water. Zastosovuєtsya to the list (chovna).

The appearance of a food sign. Stops the div element (power sign).

If you look at the demo page, you can tell that the animation for the list item (bar) is also the div element in the middle (Power sign). The same animation is "hanging" for an unordered list dіє per item in the list (clear and food sign).

Otzhe, you can zrobiti visnovok, sho child elements take away the animations of the fathers for an addition to their actions. Now it’s more than enough to overthrow the structure of the father/spadkoєmets.

css

First, to start analyzing the creation of animation, it is necessary to ensure the safety of old browsers.

Zvorotnya sumistnіst

We’ll safely create a summation just by setting the layout styles like this, nibi CSS animation I don’t know. If you want to look at the page in the old browser, then turn on a static image, and not an empty space.

For example: how to hack CSS? podіbniy to below hovered, then there will be problems:

/* NOT PROPERLY! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* Danish fade-in-animation div - oops!*/ animation: our -fade-in-animation 1s 1;

If the browser doesn't render the animation, the div element will be rendered invisible to the curator.

And the axis is so safe with old browsers:

/* FAVORITE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* Danish div for the fade in animation */ animation: our -fade-in-animation 1s 1;

The div element will now show up as the animation cannot run. And in current browsers div will be a bunch of attachments for an hour of animation.

The foundation

Now we know how to secure a healthy mind (which will help you avoid problems when working on real projects). It's time to create the base of our CSS code.

It is necessary to remember 3 points:

Shards of the victorist banner can be found on various websites, we smash all of our CSS selectors especially. All stinks start with the #ad-1 identifier. In this rank, we are trying to hide our code and the code of the site.

We may want to ignore the animation stutter in settings. If you want to tweak animation shading with given styles and visibility of elements behind promotions, then the banner structure will be destroyed by rapt characters or by the appearance of parts of the image after the animation is completed. Animation zatrimka imitates trivality and improved frames.

If possible win one animation for a few elements. In this rank, we will spare an hour and soon will expand the code.

So, let's create the basis for our banner. Let's make it easy for her to position herself so that the internal elements can be correctly placed. Also include everything that goes beyond the scope of the element:

#ad-1 ( width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px #000;

Let's set the styles for the text and fields of the introduction. We click on different animations. It is also necessary to reconsider, so that you can find the best z-index for parts that collapse, so that the stench does not overlap:

#ad-1 #content (width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; ) #ad-1 h2 ( font-family: "Alfa Slab One", cursive, color: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px animation: delayed-fade-animation /* Appear h2 to simulate fade */ ) # ad-1 h3 ( font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Appear h3 with imitation of twitch */ ) #ad-1 form ( margin: 30px 0 0 6px; 12s 1 ease-in-out; 16px, font-family: "Lucida Grande", sans -serif; color: #ffff; r-bottom-left-radius: 5px; border:1px solid #a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: #c7b29b; background- image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: left ; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: #137dd5; text-shadow: 1px border-bottom-right-radius: 5px; border:1px solid # border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( (255,255,255 ) 100%);

Now let's set the styles for the driver and we'll make a special animation:

#ad-1 ul#water( /* Need another animation for the water, you can add it here */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url(.. ) /images/ad-1/water-back.png), background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px animation: water-back-animation 3s infinite ease-in-out; /* Imitation of splashing whiff */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; background-image: url(../images/ad-1/water-front .png), background- repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animation: water-front-animation 2s infinite ease-in-out; creating a perspective effect.

Set styles for the string and yoga elements. Also, we call out the following animations:

#ad-1 ul#boat ( width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; animation: boat-in-animation 3s 1 ease-out /* Slides the group in when ad starts */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position : absolute, bottom: 0px, left: 0px; overflow: visible; animation: boat-animation 2s infinite ease-in-out; */ ) #ad-1 #question-mark ( width: 24px; height: 50px; background- image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */ )

Now let's create styles for the cold. For them, my vicoristovuvatimemo animation with the effect of unskinned movement. illustration demonstrates the essence of the idea:

And the i axis CSS code:

#ad-1 #clouds ( position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; /* Scroll gloomy left, drop and repeat */ ) #ad-1 #cloud-group -1 ( width:720px; position: absolute; left:0px; ) #ad-1 #cloud-group-2 ( width: 720px; position: absolute; left: 720px; ) #ad-1 .cloud-1 ( width : 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); position: absolute; top: 10px; left: 40px; ) #ad-1 .cloud-2 ( width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); position: absolute; top: -25px; left: 300px; ) #ad-1 . cloud-3 ( width: 132px; height: 105px; background-image: url(../images/ad-1/cloud-3.png); position: absolute; top: -5px; left: 530px; )

Animations

Guessing: Starting from the point, nothing really animates. If you marvel at our banner at once, then you will see a static picture. Animations are being created here, like they are calling out to the induced code.

Now we can breathe life into our miracle static picture:

/* Animation with imitation of the zatrimka is vindicated to show a few elements. Imitation of the stunt is achieved by launching the process with 80% of the animation progress (but not at once). This is how you can simulate a fade: */ @keyframes delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animation for displaying shapes email address and button. The keyframes form-animation ( 0% (opacity: 0; right: -400px;) 90% (opacity: 0; right: -400px;) 95% (opacity: 0.5; right: 20px;) 100% (opacity: 1; right: 0px;) ) /* This animation is drawn to bring the ship out of the screen onto the cob of the movie: */ @keyframes boat-in-animation ( 0% (left: -200px;) 100% (left : 20px;) ) /* Animation for cold. The first group of hmar starts moving from the center, and the other - right-handed in front of the screen. The first group is properly shown on the screen, and the other one is right-handed. As soon as the left group is close together, the gloomy ones are already turning fast on the cob position: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) * The three remaining animations are practically the same - the difference between positioning elements.The stench mimics the splashing of the ocean: */ @keyframes boat-animation ( 0% (bottom: 0px; left: 0px;) 25% (bottom: -2px; left: -2px;) 70% (bottom: 2px; left: - 4px;) 100% (bottom: -1px; left: 0px;) ) @keyframes water-back-animation ( 0% (bottom: 10px; left: -20px;) 25% (bottom: 8px; left: -22px;) ) 70% (bottom: 12px; left: -24px;) 100% (bottom: 9px; left: -20px;) ) @keyframes water-front-animation ( 0% (bottom: -70px; left: -30px;) 25% (bottom: -68px; left: -32px;) 70% (bottom: -72px; left: -34px;) 100% (bottom: -69px; left: -30px;) )

Visnovok

During the course of the lesson, we learned a few key concepts:

1. Elements of decay take away the animations of their fathers for an addition to their animations.
2. When folding the banner, it is necessary to cross-link the unique identifier in order to uniquely overlap the code with the main CSS project.
3. The position of the style of the elements should be chosen in such a way, otherwise the animation is not available, in order to ensure the safety of the mind.
4. If possible, it is necessary to win one animation for a few elements.

A floating block (otherwise, it is also called collapsing, fixing, sticky) is used on the site in order to make one unruly element when scrolling on the side, in which case advertising is most often placed (teasers, banners or context).

Unfortunately, the rules of adsense are not for us to protect. Tim is no less, rich in authority on sites and ignores the rules on his own fear and risk. Possibly, they are not punished for the price, but I am not for the sake of taking risks.

I place in such blocks RMYA, my own teasers/banners, and sometimes I replace adverts with vivoj there are similar entries, or I’ll draw a line for providing information.

Let's find out how you can build a floating block on your site.

Manager: build the remaining block at the beach column (sidebar) - floating. Until then, the wine stuck only at that moment, if the coristuvach reaches the new one by scrolling, and not by the second when the side is opened. Also, the block can “vіdlipati”, reaching the footer (to avoid twisting it).

The most working way

There are many options for implementing the block that stick, but not all stinks work correctly. I will say special certificate: one and the same installation method can be used for a block on one site, and jambs appear on another.

Below is the butt of a floating block, which has been practically put on all sites, where I have installed it. There were no stocks. The engine is also not important (DLE, WordPress, LiveStreet etc.).

Insert the following HTML-code in the bagan city of the white column:

$(window).scroll(function() (
var sb_m = 20; /* enter the top and bottom */
var mb = 300; /* Height of the reserve */
varst = $(window).scrollTop();
var sb = $(".sticky-block");
var sbi = $(".sticky-block .inner");
var sb_ot = sb.offset().
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop": h));
}
else(
sb.css(("paddingTop": 0));
}
}
} ) ;

From whom all the code can be set to the beast, from below, and to bring the height of your base, tobto. that height, de block needs to be sharpened.

Now JS is included. For which it is written in the HEAD section: