Показать сообщение отдельно
  #2 (permalink)  
Старый 11.07.2018, 12:02
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
header {
 width: 100%;
 background: #D8E3AB no-repeat 5% 50%;
 height: 115px;
 position: relative;
}

#sidebar { /* Левая колонка */
 position:relative;
 float: left;
 border: 1px solid #333;
 width: 230px;
 padding: 20px;
 margin: 10px 10px 20px 5px;
 background: #fff8dd;
}
#content { /* Правая колонка */
 margin: 10px 5px 20px 290px;
 padding: 20px;
 border: 1px solid #333;
 background: #fff8dd;
 min-height: 423px;
}
</style>
<header></header>
<div id="sidebar">
<b>Меню</b>
	<ul>
		<li><a href="/"><img src="admin/news.png" height="40" width="110" class="animate1" title="" alt="Новости"></a></li>
		<li><a href="/о-компании"><img src="admin/about.png" height="40" width="140" class="animate1" title="" alt="О компании"></a></li>
		<li><a href="/тарифы"><img src="admin/tariffs.png" height="40" width="110" class="animate1" title="" alt="Тарифы"></a></li>
		<li><a href="/контакты"><img src="admin/connect.png" height="40" width="120" class="animate1" title="" alt="Контакты"></a></li>
	</ul>
<b>Погода</b>
<p><center><table>
<tr><td>
<!-- Gismeteo informer START -->
<link rel="stylesheet" type="text/css" href="https://nst1.gismeteo.ru/assets/flat-ui/legacy/css/informer.min.css">
    <div id="gsInformerID-gwCH5K54g36hHg" class="gsInformer" style="width:210px;height:116px">
        <div class="gsIContent">
            <div id="cityLink">
                                    <a href="https://www.gismeteo.ru/weather-yelizovo-4908/" target="_blank">Погода в Елизово</a>
            </div>
            <div class="gsLinks">
                <table>
                    <tr>
                        <td>
                            <div class="leftCol">
                                <a href="https://www.gismeteo.ru/" target="_blank">
                                    <img alt="Gismeteo" title="Gismeteo" src="https://nst1.gismeteo.ru/assets/flat-ui/img/logo-mini2.png" align="middle" border="0" />
                                    <span>Gismeteo</span>
                                </a>
                            </div>
                            <div class="rightCol">
                                <a href="https://www.gismeteo.ru/weather-yelizovo-4908/2-weeks/" target="_blank">Прогноз на 2 недели</a>
                            </div>
                        </td>
                        </tr>
                                    </table>
            </div>
        </div>
    </div>
<script async src="https://www.gismeteo.ru/api/informer/getinformer/?hash=gwCH5K54g36hHg" type="text/javascript"></script>
<!-- Gismeteo informer END -->
</td>
</tr>
</table></center>
</div>
<div id="content"></div>
<script>
var roof = +getComputedStyle(document.querySelector('header')).height.replace('px','') + 10;

window.onscroll = function()  {

    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    if(scrolled > roof)   sidebar.style.top = scrolled - roof + "px";
}
</script>
Ответить с цитированием