Geek asks and answers

How to make sticky div with cork

someone can tell me how this effect is triggered when I go down to a web page, and there is a field that was first in the middle of the page, but stuck away from the content along the way down, and also follow it at the bottom of the page. I see this on Facebook and on many websites. I do not know "Div" because they remain fixed.

Sorry to forget to write that they move when it only touches the top of the page.

+5
source share
5 answers

From what I understand, you want something to follow you, like scrolling down, but first it was in the middle of the web page. You can do this with some jquery:

Example

textbook

+1
source

Javascript, div pageYOffset , css, div , .

, jQuery;

var position = window.pageYOffset;

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

CSS;

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

+1

div position: fixed; - .

So, if you have one divwith 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;
}
0
source

You just need to use some basic css:

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

More articles:


All Articles