Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.05.2017, 16:06   #1
Мармур
Новичок
Джуниор
 
Регистрация: 24.05.2017
Сообщений: 2
По умолчанию Привязка к двум объектам

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

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

Ума не приложу как это сделать. Буду очень благодарен если сможете дать какой либо пример подобного исполнения, хотя бы самый простейший.
Изображения
Тип файла: png рис1.png (10.2 Кб, 82 просмотров)
Тип файла: png рис2.png (5.9 Кб, 85 просмотров)
Мармур вне форума Ответить с цитированием
Старый 25.05.2017, 13:44   #2
Мармур
Новичок
Джуниор
 
Регистрация: 24.05.2017
Сообщений: 2
По умолчанию Ответ

В общем не дождавшись ответа от Форумчан. Но нашёл в инете вот этот сайт который мне дал ответ http://shpargalkablog.ru/2013/09/scroll-block.html
Сумел их код уменьшить на несколько строк, так что если кому надо пользуйтесь.
PHP код:
<head>
  <
style>
   
header {    
    
displayblock;
    
position: static;
    
height90px;    
    
width100%;    
}
    
nav
    
{

        
display:block;
        
positionabsolute
        }
    .
sticky
    
{
        
positionfixed;
        
top0px;  
        
z-index101;
    }
  </
style>
</
head>

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

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

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Консультация по объектам 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