Левая колонка прокрутки, другие параметры, а затем полоса прокрутки?

Question

У меня вопрос о простой прокрутке содержимого в html/css. Это то, что у меня есть:

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

Это мой HTML-код: (я использовал загрузчик)

<div class="row"> 
     <div class="span6"> 
      <div class="row" id="errors"> 
       <div class="span6> 
       </div> 
       <div class="span6> 
       </div> 
       .... 
      </div> 
     </div> 
     <div class="span6"> 
      <div id="side-content"> 
       <iframe id="iframe" src="" scrolling="no" frameborder="0"></iframe> 
      </div> 
     </div> 
</div> 

Answer 1

Вы можете попробовать что-то вроде следующего.

$win = $(window); 
    $win.on('scroll', function() { 
     $("#side-content").css({"position":"absolute", "top":"0"}, $win.scrollTop() > 1); 
    }); 

Идея этого - то же самое, что и липкое меню заголовка, когда пользователь прокручивается за определенную точку. Поскольку вы всегда хотите, чтобы он оставался там, если пользователь прокручивает более 1 пикселя, он вернется к началу: 0. Таким образом, это будет почти незаметно для пользователя.

Если вы пытаетесь что и не хотите, вы можете также возможно использовать только

#side-content { position: fixed; top: 0; } 

, но это не будет работать, если # слайд-контента высота больше, чем окно, очевидно

Answer 2

Попробуйте установить высоту плавающего фрейма такие же высоты, как столбец слева. Затем сделайте переполнение прокручиваемым при необходимости. Это будет работать, если вы знаете высоту iFrame.

#errors{ 
    height:400px; 
    overflow-y:auto; 
} 
#side-content{ 
    height:400px; 
}