сделать поплавок: левый div sticky

Question

Я ищу простое решение для легкой проблемы, и я считаю, что оно было применено где-то, но не в состоянии найти решение.

Так что теперь у меня очень длинная страница введения, такая как одна из википедии, и список навигационных ссылок, таких как wikipedia. В wikipedia у них есть ссылки наверху в конце каждого абзаца, но я не хочу этого делать. Вместо этого я пытаюсь сделать таблицу липкой при прокрутке вниз.

текущий код выглядит так:

<div id="introtable"> 
    <table class="normalfont"> 
     <tr> 
      <td style="border: 1px solid #000000;"> 
       <p align="center" style="margin-top:13px;">Contents</p> 
       <ul> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
        <li><a href="#something">something</a></li> 
        <ul> 
         <li><a href="#something">something</a></li> 
         <li><a href="#something">something</a></li> 
        </ul> 
       </ul> 
      </td> 
      <td style="width:25px;"></td> 
     </tr> 
    </table> 
</div> 

<p align="justify" id="something" style="margin-top:5px;"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

<p align="justify" id="something" style="margin-top:5px;"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

      <p align="justify" style="margin-top:5px"> 
       some texts 
      </p> 

И CSS, как это:

#introtable{ 
    width:255px; 
    margin-top:10px; 
    margin-bottom:10px; 
    float:left; 
} 

.normalfont{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
} 

Теперь тексты абзацев обернуть вокруг стола, оставляя некоторое пустое пространство между столом и тексты.

Я хотел бы, чтобы стол наклеился на страницу, оставаясь по-прежнему плавающим влево, то есть все еще имея абзацы, обертывающие вокруг него.

Я попытался добавить положение: исправлено, но оно отменяет поплавок: влево, заставляя абзац появляться под столом.

Возможно ли это посредством чистого CSS? Если нет, javascript также является приемлемым.

Пожалуйста, помогите. Заранее спасибо.

Answer 1

Я не уверен, что это может делать с чистым CSS, но, к сожалению, я не эксперт по CSS. Но используя JS (с JQuery в этом примере), вы можете изменить таблицы margin-top на прокрутку. Обернутый выше текст по-прежнему будет завернут, но это не будет видно, и текст не будет нуждаться в перемещении.

Поскольку настройки CSS при прокрутке может дать своего рода судорожным эффект (особенно если обработано асинхронной), я приспособил установку предельной-сверху короткой анимации, чтобы иметь стол легкость в месте:

$(window).scroll(function(e){ 
    $('#introtable').stop().animate({'margin-top': 10 + $(this).scrollTop()}, 10); 
}); 

Пример fiddle

Answer 2

Просто установите position на номер fixed (position: fixed) контейнера, который вы хотите оставить на том же месте в браузере. Тогда вы можете установить его точно, указав: bottom: 30px; right: 0 и т. Д.

Answer 3

Если у вас есть боковая панель, которая прилипает к экрану и позволяет прокручивать страницу, я думаю, вам нужно переоценить макет html, который у вас есть ,

В своем макете вы просите копию плавать вокруг секции боковой панели независимо от того, где она находится. Было бы здоровее, если бы ваш код определял их по-разному.

Моя рекомендация заключается в том, что вы используете фреймворк, такой как: bootstrap, foundation, materialize.

Или

Использование Flexbox - example - http://www.w3schools.com/html/html_layout.asp

Кроме того, это не лучшая практика, чтобы просто иметь р теги плавающий вокруг всей воли-неволей.

---

Если вы просто хотите, чтобы ваш ящик, чтобы прилипнуть к углу

class { 
    position:absolute; 
    bottom:20px; 
    left:20px; 
} 

Answer 4

вы должны дать абзацы некоторые margin-left, чтобы избежать дублирования:

#introtable{ 
position:fixed; 
width:255px; 
margin-top:10px; 
margin-bottom:10px; 
float:left; 
} 
p{ 
margin-left:15%; 
}