How can I create a static
?

Question

I would like create a static <div>, if user uses the scroll, the <div> must be still.

Context: I am working in a project and I need three static components, I managed to make two components but as I am using JSF, Primefaces and Bootsfaces (bootstrap and JQuery), the third component must be different. The thrid component must be a typical <div>.

My code: 1. html:

<div id = "divProyecto">
    ....
 </div>

2. css:

#divProyecto{
    background-color: blue;
    height: 50px;
    margin-top: 10px;
    width: 100%;
    display: block;
    border: solid #222222 1px;
}

3. js (I found this code, but doesn't work):

$(document).ready(function () {
    $('#divProyecto').scrollToFixed();
});

This image resume all: http://s2.subirimagenes.com/imagen/9622798algo.gif The image show as the black boxes don't move, but blue box move with scroll.

Thanks you!

I think you'll find the solution has been addressed here: [how can I stick the div after scrolling](http://stackoverflow.com/questions/14496240/how-can-i-stick-the-div-after-scrolling-down-a-little) — John Detlefs, Jul 14 '16 at 02:16
Possible duplicate of [Position Fixed elements](http://stackoverflow.com/questions/24783299/position-fixed-elements) — ldg, Jul 14 '16 at 02:26
and here: http://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll and... lmgtfy... — ldg, Jul 14 '16 at 02:27

score 2 · Accepted Answer · answered Jul 14 '16 at 02:11

2

You should use position: fixed;

And specify the

top: 100px;
left: 100px;

http://jsfiddle.net/tovic/fwkWG/

answered Jul 14 '16 at 02:11

Sam Battat

5,725
1
20
29

Perfect! Its is the solution! THANKS!! – Juan Camacho Jul 14 '16 at 02:15

score 0 · Answer 2 · answered Jul 14 '16 at 02:08

0

position: fixed;

It cant work in IE 6, as IE 6 not support position: fixed.Google chrome ,Firefox AND IE with version > 6 should be no problem.

answered Jul 14 '16 at 02:08

KyLim

468
1
6
22

score 0 · Answer 3 · answered Jul 14 '16 at 02:08

Use position: fixed and then position on the screen as you see fit.

    #divProyecto{
        background-color: blue;
        height: 50px;
        margin-top: 10px;
        width: 100%;
        display: block;
        border: solid #222222 1px;
        position: fixed;
        left: 0;
        top: 0;
    }

The above will position your div on the top left corner of the window.

score 0 · Answer 4 · answered Jul 14 '16 at 02:13

0

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* your choice */
margin: 0;

answered Jul 14 '16 at 02:13

Leonid Zakharov

940
1
6
11

1

Welcome to Stack Overflow! While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – coatless Jul 14 '16 at 03:50
Thank you. To OP: my post is CSS style for your div `#divProyecto`. – Leonid Zakharov Jul 14 '16 at 04:33

How can I create a static ?

4 Answers4

How can I create a static
?