How to fix the position of an element inside a div with scroll (com css)

Question

How to fix the position of an element inside a div with scroll (com css)

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

6

Is it possible to fix an element (div, img, p) in a div with scroll and with position:relative and using css only?

* Currently I reposition the div using the $('elemento').scroll() function and calculating the scroolTop() of the element but in IE (the worst browser in the world) there is a delay and the element is 'tremendous' so I wonder if it is possible to do this with CSS only.

HTML:

<div class="divContainer">
    <div class="conteudoFixo">
        <h3>Objeto Fixo</h3>
    </div>
    <div class="conteudoNormal">
        <ul>
            <li>Primeira conversa</li>
            <li>Segunda conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>

        </ul>
    </div>
</div>

CSS:

.divContainer {
    height:200px;
    width:300px;
    position:left;
    overflow:auto;
    border: 1px solid #FF0000;
    position: relative;
}

.conteudoFixo {
    position: absolute;
    top:0px;
    left:0px;
    background-color:#FF00FF;
    width:100%;
}

Example link: link

javascript html jquery css

asked by anonymous 16.05.2014 / 22:35

3 answers

1

Put this in your CSS:

.conteudoFixo {
    position: fixed;
    width: 300px;
    background-color:#FF00FF;
}

16.05.2014 / 22:39

1

I would change your css by adding this code to the conteudoNormal class.

.conteudoNormal{
    overflow:auto;
    height:200px;
}

And would leave the class divContainer like this:

.divContainer {
    width:300px;
    position:left;
    border: 1px solid #FF0000;
    position: relative;
}

16.05.2014 / 22:53

How to add the fadeIn effect in this image transition code Compare date time with a timespan

score 1 · Accepted Answer

So my friend, the solution is simple, it does not make sense to leave .conteudoFixo within a div with scroll that in case your code is the parent% .divContainer div ... the wiser would be to leave the div you want to set it out of the scroll, making only the list items roll along with the div, so do as I did in your code that I edited.

link

Explaining the edit:

1- The% wrapper% no longer has the% wrapper property, it remains relative, and within it follows 2 divs, the wrapper% and the wrapper% ... both have the% wrapper property together with .divContainer , so one is below the other in the order of your HTML markup.

2 - The% d of% only has a css style for styling, styling as you like.