Сделать DIV больше, если прокручивается

Question

Возможно ли сделать DIV больше при прокрутке содержимого страницы? У меня есть чат с позицией: исправлено в правой части моей страницы. Мой CSS для окна чата - высота: 100% правая: 0 нижняя: 0 верх: 50 пикселей. Верх: 50 пикселей - это потому, что я не хочу, чтобы он скрывал панель навигации поверх моей страницы. Теперь проблема в том, что, когда я начинаю прокручивать страницу, панель навигации, очевидно, исчезает из поля зрения, а поверх моего чата - 50 пикселей. Я хочу, чтобы, когда я начинаю прокручивать страницу, чатбокс должен принимать все 100% экрана, так что на нем нет пробела.

Answer 1

вы можете сделать это:

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.chat_box').css({top:'0px'}); 
     } 
     else { 
      $('.chat_box').css({top:'10px'}); 
     } 
    }); 
}); 

http://jsfiddle.net/5tnygmrz/1/

Answer 2

демо - http://jsfiddle.net/victor_007/cq1e8c1t/

я думаю, что вы будете нуждаться в яваскрипте

window.onscroll = function (e) { 
    var topscroll = window.scrollY 
    if (topscroll > 50) { 
     document.getElementById('fixed').style.top = 0 
    } else { 
     document.getElementById('fixed').style.top = 50 + 'px' 
    } 
}