How to make a sticky div with a stopper

Question

someone can tell me how this effect is called when I go down on a web page and there is a box that at first was in the middle of the page but on the way down is stuck to the side of the content and also follow you to the bottom the page. i see this on facebook and many website. I know not a 'Div' because these remain fixed

Sorry I forget to wrote they move when only the top of page touches them

divs can remain fixed, follow you, move around, disapear, I would say probably you can do it with a div — Santiago Rebella, Apr 18 '13 at 21:30
Most of the examples you see on the web is achieved with some javascript. — jtheman, Apr 18 '13 at 21:30
I think the question is about a div that would start mid way, but when you scroll it moves to the top, but once it hits the top, it stops scrolling, and stays at the top. — nycynik, Apr 18 '13 at 21:36

Santiago Rebella · Answer 1 · 2013-04-18T22:00:36.223

Using Javascript, you could put a listener on the window for scroll event and calculate distance from end of the div with pageYOffset or similar and then apply css to make that div fixed when the scroll bar reaches that position.

EDIT

Just for the fun, with jQuery;

var position = window.pageYOffset;

$(window).on('scroll', function () {
    position = window.pageYOffset;
    if(position > 150) {
        $('#div').css({ 'top': position + 'px' });
    } 
});

and in the CSS;

#div {
    position:absolute;
    top: 150px;
    -webkit-transition: top 1s ease-in-out;
}

this should work

score 1 · Accepted Answer · answered Apr 18 '13 at 21:39

1

From what i understand, you want something to follow you as your scroll down but at first it was in the middle of the webpage. You can make it with some jquery:

Example

tutorial

answered Apr 18 '13 at 21:39

Dan

3,755
4
27
38

Yes! This is what i want but it can be made to responde quicker? – Elisa Machorro Apr 18 '13 at 21:41
the plug in i linked to is just one of many - im sure it has parameters to specify MARGIN, PADDING, SPEED etc... so YES you can but you have to go through the tutorial – Dan Apr 18 '13 at 21:42

score 1 · Answer 3 · edited May 23 '17 at 12:12

1

Here is a tutorial that I found that tells you how to do exactly that.

Here is an similar question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?

and a tutorial that explains it using jquery. http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

edited May 23 '17 at 12:12

Community

1
1

answered Apr 18 '13 at 21:43

nycynik

7,371
8
62
87

Tiago César Oliveira · Answer 4 · 2013-04-18T21:40:32.913

The easiest way to reproduce that is by using a div with position: fixed; - it will stick to its original position all the way up or down the page.

So, if you have a div with your menu:

<div id="menu">
  <ul>
    <li><a href="link1.htm">Link 1</a></li>
    <li><a href="link2.htm">Link 2</a></li>
    <li><a href="link3.htm">Link 3</a></li>
  </ul>
</div>

You can customize it with

#menu {
  position: fixed;
  left: 250px;
  top: 10px;
}

score 0 · Answer 5 · answered Apr 18 '13 at 21:32

0

You just need to use some basic css:

#fixed {
    position:fixed;
    right:0px;
    top:150px;
}

answered Apr 18 '13 at 21:32

Anonymous

3,679
6
29
40

2

You can ommit the "px" when the actual number is 0 :-) – Tiago César Oliveira Apr 18 '13 at 21:37

How to make a sticky div with a stopper

5 Answers5