С Новым годом! Форум программистов, компьютерный форум, киберфорум
Angular/AngularJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
 Аватар для Anna5194
0 / 0 / 0
Регистрация: 25.03.2019
Сообщений: 62
Записей в блоге: 6

Плавающее меню

25.03.2019, 16:18. Показов 1492. Ответов 3

Студворк — интернет-сервис помощи студентам
Нужно сделать плавающее меню, которое сначала в положении relative, когда проскроливаешь до момента, когда меню упирается в верх экрана, оно фиксируется в этом положении, а когда доходит до футора, фиксируется сверху футера. Работаю в Ангуляре с typescript. Использовала 3 стиля css для каждого положения меню. Они должны сменять друг друга, если скролить до определённого момента. Выглядит код ts вот так


JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@HostListener("window:scroll", ['$event']) onScroll(){
   if (this.contentBlock.nativeElement.getBoundingClientRect().top < 0 && window.scrollY < y){
     this.element = document.elementFromPoint(500, 0);
     this.elementId = this.element.id;
     console.log(this.element.id);
 
     this.renderer.addClass(this.menuBlock.nativeElement, 'fixed');
 
     var e = document.getElementById("cont");
    var y = e.scrollHeight;
    
    }
    else{
      this.element = null;
      this.elementId = 'start';
      this.renderer.removeClass(this.menuBlock.nativeElement, 'fixed');
    
    }
    if(this.contentBlock.nativeElement.getBoundingClientRect().top < 0 && window.scrollY > y){
      this.element = document.elementFromPoint(500, 0);
      this.elementId = this.element.id;
      
      this.renderer.addClass(this.menuBlock.nativeElement, 'stop');
 
    }
    else{
      this.renderer.removeClass(this.menuBlock.nativeElement, 'stop');
    }
 
  };
Первый стиль, основной, работает. А вот стили 'fixed' и 'stop' нет. Если вместо 'y' во второй и 19 стоках прописать числа, то работает, но мне надо, чтобы оно само вычисляло, на каком моменте когда переключаться. Надо как-то переделать строчки 9 и 10.

ПРОСЬБА! не скидывайте в ответах ссылки на другие обсуждения этого форума. я по этой теме всё пролистала, по итогу там везде вместо нормальных ответов ссылки друг на друга. Просто замкнутый круг без ответов. Просто напишите словами, что как исправить. Можно кодом. Только без ссылок, только если на сторонние ресурсы. Можно на английском. Я с ангуляром только 2 недели работаю, я его ещё плохо понимаю с typescript-ом
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
25.03.2019, 16:18
Ответы с готовыми решениями:

Плавающее меню
есть меню нужно сделать чтоб оно двигалось за пользователем &lt;!-- ---íà÷àëî âûäâèãàþùåãîñÿ...

Плавающее меню
Привет. Здесь меню перемещается вместе с прокруткой страницы (плавающее) http://demo-shop.whatasoft.net/]. Как это происходит? По js...

Плавающее меню
Всем привет! Использую CMS WordPress и шаблон для неё. Работает всё отлично. Но вот недавно зашёл на сайт с планшета и увидел, что меню не...

3
 Аватар для Anna5194
0 / 0 / 0
Регистрация: 25.03.2019
Сообщений: 62
Записей в блоге: 6
26.03.2019, 12:48  [ТС]
Ребят, может вам какой ещё информации не хватает? Может ещё какой кусок кода выложить? Я просто не знаю, поможет ли вам это или нет. Единственное уточнение, id 'cont' я дала основному блоку с текстом. Всё вроде. Если что, вы хоть напишите, а то 30 просмотров темы и никто так и не ответил. ЭЭЭЙ! Знатоки! Вы где? А то я начиталась тут обсуждений, единственные ответы от знатоков - это ссылки на такие же обсуждения без ответа

Добавлено через 3 часа 52 минуты
ну и зачем вы моё сообщение отредачили??? Это typescript код, а не js. Вы же неправильно сделали. Хоть языки похожи, но они разные! Я бы и написала правильно, но тут нет кнопки typescript. А так теперь те, кто будут мне отвечать по теме, будут это делать неправильно. Потому что синтаксис разный. Зашибись теперь
0
 Аватар для Anna5194
0 / 0 / 0
Регистрация: 25.03.2019
Сообщений: 62
Записей в блоге: 6
28.03.2019, 09:46  [ТС]
Ребята, переделала строчки 9-10 кода следующим образом:
JavaScript
1
2
3
4
var b: any = document.getElementsByTagName('body');
      var foot: any = document.getElementsByTagName('footer');
      var cont: number = b[0].clientHeight - foot[0].clientHeight;
      console.log('content heigth: ', cont);
Так же заменила "у" на "cont".

НОООО...!!! Код всё равно не работает. Что я делаю не так?(((
0
 Аватар для Anna5194
0 / 0 / 0
Регистрация: 25.03.2019
Сообщений: 62
Записей в блоге: 6
03.04.2019, 11:43  [ТС]
Сама сделала. Ловите новый код
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@HostListener("window:scroll", ['$event']) onScroll(){
    if (this.contentBlock.nativeElement.getBoundingClientRect().top < 0){
 
      if(!this.isSetPositionFixed){
        this.renderer.removeClass(this.menuBlock.nativeElement, 'fixed');
        this.renderer.addClass(this.menuBlock.nativeElement, 'stop');
      }
      else{
        this.renderer.addClass(this.menuBlock.nativeElement, 'fixed');
        this.renderer.removeClass(this.menuBlock.nativeElement, 'stop');
      }
      
      this.element = document.elementFromPoint(500, 0);
      this.elementId = this.element.id;
 
      // Высота блока меню
      this.menuBlockHeight = this.menuBlock.nativeElement.offsetHeight;
      // Высота блока контента
      this.contentBlockHeight = this.contentBlock.nativeElement.offsetHeight;
 
      this.checkAntiFixed = (this.contentBlock.nativeElement.getBoundingClientRect().top + this.contentBlockHeight - this.menuBlockHeight) < 0;
      this.isSetPositionFixed = !this.checkAntiFixed;
 
      
      console.log('check: ', this.checkAntiFixed);
      console.log('ContentTop: ', this.contentBlock.nativeElement.getBoundingClientRect().top + this.contentBlockHeight - this.menuBlockHeight);
      
      this.element = document.elementFromPoint(500, 0);
      this.elementId = this.element.id;
    }
 
    else{
      this.element = null;
      this.elementId = 'start';
      this.renderer.removeClass(this.menuBlock.nativeElement, 'fixed');
    }
    
  };
Теперь 3 стиля отлично сменяют друг друго, НО (как без "но" в программировании) сменяют они друг друга только при скролинге. К примеру, если нажать на меню, чтобы меня проскролило до нужного пункта текста, то менюшка остаётся внизу в стиле 'stop'. Чтобы оно работало, надо будет скролить. Сейчас сижу, думаю, как исправить. Если есть идеи, отпишитесь. Да, прошлый код не работал, потому что ангуляр при вычислении отсеивает переменные. Потому надо ухищраться как-то. А ещё, все коды, что я здесь скинула, написаны на typescript, не на js. Это важно. Но если я не буду помещать это в спец. скобочки, то, блин, ошибка, видители, на этом форуме и сразу же начинают исправлять. Ребят, если ещё какой код скинуть, пишите, не молчите

Добавлено через 1 минуту
Забыла написать, как я получила высоты всего
JavaScript
1
2
3
4
5
6
7
8
export class HowToRentPageComponent implements AfterViewInit {
  element: any = null;
  elementId: string = 'start';
  menuBlockHeight: number = 0;
  contentBlockHeight: number = 0;
  footerBlockHeight: number = 0;
  checkAntiFixed: boolean;
  isSetPositionFixed: boolean;
Этот код стоит перед предыдущим кодом, если что.

Добавлено через 51 минуту
А ещё, для плавного скроллинга, я в конструкторе добавила это

JavaScript
1
2
3
4
5
6
7
8
9
10
scrollToElement(val: string){
    var el = document.getElementById(val);
    var coord = el.offsetTop;
    // window.scrollTo(0, coord);
    window.scrollTo({
      top: coord,
      left: 0,
      behavior: "smooth"
    });
  }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
03.04.2019, 11:43
Помогаю со студенческими работами здесь

Плавающее меню
Здраствуйте уважаемые программисты!:) Вот имеется меню:Main MENU{ POPUP{ MENUITEM &quot;About&quot; , MI_ABOUT } Как из этого всплывающего...

Плавающее меню
Доброго времени суток, уважаемые форумчане! В моём распоряжении есть следующий код прокрутки плавающего меню: $(function(){ var...

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

Плавающее меню
Добрый день. Такой вопрос, мне нужно создать меню точно такое же как тут: http://lokeshdhakar.com/projects/lightbox2/ Со всеми...

Плавающее меню на сайте
Не знаю как это объяснить, но я постараюсь. Есть на сайте сайдбар, при прокрутке страницы (когда страница доходит до сайдбара) они...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru