Привязка к двум объектам - HTML и CSS

Мармур · 24.05.2017, 16:06

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

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

Ума не приложу как это сделать. Буду очень благодарен если сможете дать какой либо пример подобного исполнения, хотя бы самый простейший.

Мармур · 25.05.2017, 13:44

В общем не дождавшись ответа от Форумчан. Но нашёл в инете вот этот сайт который мне дал ответ http://shpargalkablog.ru/2013/09/scroll-block.html
Сумел их код уменьшить на несколько строк, так что если кому надо пользуйтесь.

PHP код:


			
<head>
  <style>
   header {    
    display: block;
    position: static;
    height: 90px;    
    width: 100%;    
}
    nav
    {

        display:block;
        position: absolute; 
        }
    .sticky
    {
        position: fixed;
        top: 0px;  
        z-index: 101;
    }
  </style>
</head>

<header id="header"> <!--Шапка-->
</header>

<nav id="nav"> <!--Навигация-->        
</nav>    

<script>
    (function()
    {        
        var a = document.querySelector('#nav'), b =document.querySelector('#header');  // селектор блока, который нужно закрепить
        window.addEventListener('scroll', Ascroll, false);
        function Ascroll() 
        {
            if (b.getBoundingClientRect().bottom <= 0) 
            { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
                a.className = 'sticky';
            } 
            else 
            {
                a.className = '';
            }
        }
    })()
</script>

25.05.2017, 13:44	#2
Мармур Новичок Джуниор Регистрация: 24.05.2017 Сообщений: 2	Ответ В общем не дождавшись ответа от Форумчан. Но нашёл в инете вот этот сайт который мне дал ответ http://shpargalkablog.ru/2013/09/scroll-block.html Сумел их код уменьшить на несколько строк, так что если кому надо пользуйтесь. PHP код: <head> <style> header { display: block; position: static; height: 90px; width: 100%; } nav { display:block; position: absolute; } .sticky { position: fixed; top: 0px; z-index: 101; } </style> </head> <header id="header"> <!--Шапка--> </header> <nav id="nav"> <!--Навигация--> </nav> <script> (function() { var a = document.querySelector('#nav'), b =document.querySelector('#header'); // селектор блока, который нужно закрепить window.addEventListener('scroll', Ascroll, false); function Ascroll() { if (b.getBoundingClientRect().bottom <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера a.className = 'sticky'; } else { a.className = ''; } } })() </script>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Консультация по объектам	JUDAS	C++ Builder	17	17.11.2015 16:45
как обратится к объектам	marales	Помощь студентам	2	14.11.2012 11:10
Обращение к объектам	Sanek_ntsk	Общие вопросы Delphi	3	14.04.2012 18:41
Вопросы по объектам	BadProgrammer	Общие вопросы C/C++	1	20.12.2010 03:34
привязка к динамическим объектам	areyoudead	Общие вопросы Delphi	7	04.11.2010 14:15