Fix Div with Javascript

Asked

Viewed 357 times

0

Good evening, I know this question has been answered here several times, but none of them worked for me and I will explain why.

In all solutions presented it is necessary to change the parameter position: relative; for position: fixed;, but this configuration brings the inconvenience of having to do the manual centralization of Div, specifying its values in px or another parameter, the width, that should be width: auto;, because if you take it out of auto, the Div from the menu bar does not auto-scale according to the resizing of the browser window with the mouse, or the format of the browser window from the user’s pc.

That is why I would like a purely javascript solution for this case, without CSS. Detail, I just want to fix, without any additional effect like animations, etc... Thanks in advance.

javascript
  • 3

    It’s a little hard to understand what you’re really trying to do... the width:100%; doesn’t solve your problem? Add the code of what you’ve tried, it doesn’t need to be complete, just the menu bar and how you wanted it to stay/adapt.

  • Next, I created a fixed-width div menu: 1000px; with automatic centering on the screen through position: auto; With this, whenever I click on the browser border and drag decreasing or increasing the window size, the object adjusts itself and always stays in the center. What I need is to fix it so it doesn’t roll, but if I change the value of position: auto; to position: Fixed; the object is only in the left corner, having to specify manually the position of the div. which prevents that when resizing the window, it will auto-center itself in the browser.

3 answers

0

The only way to "fix" javascript is by listening to the page scroll and updating the position of the element in real time, but this will always generate a strange blink in the element, to be really fixed only with the position: fixed;

$(window).scroll(function() {
  $('.fixa').css({"top": $(window).scrollTop() });
});
.conteudo {
  background-color: LightBlue;
  height: 2000px;
 }
.fixa {
  position: relative;
  background-color: ivory;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conteudo">
  <div class="fixa">
    fixa!  
  </div>
  conteudo...
</div>

-1


This one of yours div possesses width fixed? If you have, you can center with CSS:

div.centralizada {
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

You have to use the left with 50% and "pull" the div half of its size: in the example above the div has a width of 300 then the margin-left is 150, which is half and 300. If the div has width 600 then the margin-left would be 300. I think I could understand...

  • Thank you dear colleague, but in my text I made clear that I can not use this option "position: Fixed;" because it removes the automatic centralization of the content when resizing the browser window.

-1

You can create a div with the height and width you want:

Ex:

.conteudo{
 height: 100px;
 width: 100px;
}

Then create another one div with the following code:

.centred{
 display: flex; //Exibe um elemento como um recipiente flexível em nível de bloco . Novo em CSS3.
 flex-direction: row; //Valor padrão. Os itens flexíveis são exibidas horizontalmente , como uma linha.
 flex-wrap: wrap; //Valor padrão. Especifica que os itens flexíveis não será moldado.
 align-content: center; //As linhas são embalados na direcção do centro do recipiente flexível.
 align-items: center; //Os produtos são posicionadas no centro do recipiente.
}

Example of use:

.conteudo{
 height: 100px;
 width: 100px;
}

.centred{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-content: center;
 align-items: center;
}
<div class="conteudo">
  <div class="centred">
    Eu estou Testando...
  </div>  
</div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.