2016-09-27 3 views
2

Вот упрощенная версия моей домашней странице:Фиксированный div, который остается в пределах его родительской ширины?

<div class="main"> 
    <div class="content"> all the content of my website </div> 
    <div class="nav"> fixed on the screen and always visible </div> 
</div> 

А вот соответствующий CSS:

.main { 
    max-width: 500px; 
    height: 2000px; 
    margin: auto; 
    background-color: grey; 
} 

.nav { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position:fixed; 
    right: 0; /* that's the issue */ 
} 

Я хотел бы фиксированный элемент, чтобы остаться в пределах его родителей (прикасаясь к правому краю своего родителя). Но сейчас это касается правой границы экрана.

Любая идея, как исправить это? Благодаря!

+0

Просто используйте поплавок право вместо позиции? –

+1

Но я хочу, чтобы div был исправлен, поэтому он всегда отображается на экране, даже когда я прокручиваю. – Thomas

+1

вам понадобится немного javascript для этого и абсолютного позиционирования – Pete

ответ

2

Вы можете добавить дополнительный элемент для моделирования свойств основного контейнера, попробуйте это:

.main { 
 
    max-width: 500px; 
 
    height: 2000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
} 
 
.nav { 
 
    position:fixed; 
 
    max-width:500px; 
 
    width:100%; 
 
} 
 
.nav > div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    float:right; 
 
}
<div class="main"> 
 
    <div class="content">all the content of my website</div> 
 
    <div class="nav"><div>fixed on the screen and always visible</div></div> 
 
</div>

0

position: fixed описан как «Элемент расположен относительно окна браузера». Вы можете использовать Javascript для достижения этого эффекта, вот как вы это делаете с JQuery, например:

$(window).scroll(function() { 
 
      var y = $(window).scrollTop(); 
 
      $(".nav").css('top', y); 
 
});
.main { 
 
    max-width: 500px; 
 
    height: 4000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
.nav { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    right: 0; /* that's the issue */ 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="content"> parent </div> 
 
    <div class="nav"> fixed to parent width </div> 
 
</div>

+1

Спасибо, но я хочу, чтобы div был исправлен, поэтому он всегда отображается на экране, даже когда я прокручиваю. – Thomas

+0

DaniP имеет действительно хорошее решение, единственное соображение в том, что если вы меняете ширину родительского элемента, вам также нужно обновить значение в свойстве .nav' max-width. – Ryanthehouse

+0

для использования в режиме Div css: исправлено – Milind