How do you make a div follow as you scroll

Question

I have a div on the left hand side which includes the business hours and weather  I would like that div to scroll down and up according to how the user scrolls  So it would follow and move up and down with the page  How would I attempt this  This is my website judystropicalgarden com  Thanks

User · Answer

The post is old but I found a perfect CSS for the purpose and I want to share it.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }

Source: https://www.w3schools.com/css/css_positioning.asp

User · Answer

Using styling from CSS  you can define how something is positioned  If you define the element as fixed  it will always remain in the same position on the screen at all times   div       position fixed      top 20px

User · Answer

A better JQuery answer would be       ParentContainer   scroll function              FixedDiv   animate  top   this  scrollTop            You can also add a number after scrollTop i e   scrollTop     5 to give it buff   A good suggestion would also to limit the duration to 100 and go from default swing to linear easing       ParentContainer   scroll function              FixedDiv   animate  top   this  scrollTop    100  linear

User · Answer

You can either use the css property Fixed  or if you need something more fine-tuned then you need to use javascript and track the scrollTop property which defines where the user agent s scrollbar location is  0 being at the top     and x being at the bottom    Fixed       position  fixed      top  20px      or with jQuery       ParentContainer   scroll function              FixedDiv   css  top     this  scrollTop

User · Answer

You can use the fixed CSS position property to accomplish this   There is a basic tutorial on this here   EDIT  However  this approach is NOT supported in IE versions  lt  IE7  and only in IE7 if it is in standards mode   This is discussed in a little more detail here   There is also a hack  explained here  that shows how to accomplish fixed positioning in IE6 without affecting absolute positioning  What version of IE are you targeting your website for

User · Answer

the position fixed  property should do the work  I used it on my Website and it worked fine  http   www w3schools com css css positioning asp

[html] How do you make a div follow as you scroll?

Examples related to html

Examples related to scroll