Неправильные координаты отображения выпадающего списка

@YuraSG · Регистрация: 13.02.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые специалисты. Столкнулся с задачкой и не могу ее решить, возможно у вас будут какие-то идеи... Суть:
Есть меню с выпадающим списком, который по умолчанию display:none, а при нажатии на кнопку меню становится видимым. Реализовано это так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.menuButton').click(function(){
        
        var el = $(this).find('.subPhoneMenu')
        el.css('top',$(this).offset().top);
        if(el.css('display') == 'none'){
            $(".subPhoneMenu").hide();
            el.show();
            el.attr('active','true');
        }else{
            el.hide();
            el.attr('active','false');
        }
    });

Решил я меню сделать с position:fixed, но не просто, а при достижении им верха окна при прокрутке. Тобишь сначала меню прокручивается вместе с остальным контентом, а достигнув верха окна останавливается и остается висеть там, в поле зрения. Реализовал это таким образом:

JavaScript
1
2
3
4
5
6
$(function(){
 $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > 175) $('.floating2').addClass('fixed'); 
  else $('.floating2').removeClass('fixed');
 });

Вроде все хорошо, да не все... Выпадающий список, если прокручивать страницу и нажимать на кнопку меню(активировать), отображается все ниже и ниже в окне. Чем больше контента прокрутил, тем ниже отобразится выпадающий список. В итоге его вообще становится не видно, т.к. он отображается где-то внизу за пределами монитора))
Насколько я понял, происходит это потому-что когда список скрыт идет отсчет растояния до элемента от ПЕРВОНАЧАЛЬНОГО верхнего края окна (до прокрутки), а потом, при активации списка, это расстояние до элемента применяется уже к НОВОМУ верхнему краю окна (после прокрутки). Вот и получается что, если я прокрутил страницу на 1500пкс, то список отобразится на 1500пкс ниже того места, где он должен был бы отобразиться.

Кто-нибудь сталкивался с таким? Подскажите, пожалуйста, как можно решить эту проблему?

@Teterichev · 19.06.2014, 20:56

Пару недель назад точно с такой же проблемой сталкивался. Правда не с меню,а с перетаскиваемыми элементами (прокрутка также все портила).
Решил следующим образом: тому элементу, который только что перетащили, я присваивал класс с фиксированным позиционированием, а старый удалял.

Хотя на деле, у Вас может оказаться все сложнее.
Но может и помог

@Padimanskas · 20.06.2014, 00:12

Сообщение от YuraSG

Подскажите, пожалуйста, как можно решить эту проблему?

Метод click в jQuery возвращает объект события в свой коллбек. В этом объекте, помимо всего остального, находятся и текущие координаты курсора.

JavaScript
1
2
3
$('.menuButton').click(function(event){
    alert('x: ' + event.pageX + ', y: ' + event.pageY);
});

@YuraSG · 06.07.2014, 17:51 **[ТС]**

Ребята, благодарю за Ваши ответы! Teterichev - Ваш способ не пробовал, но за идею - спасибо. Padimankas - подсказка сработала, покопался и сделал. Спасибо! Реализовал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
       $('.menuButton').click(function(event){
        
        var el = $(this).find('.subPhoneMenu')
        el.css('x: ' + event.pageX + ', y: ' + event.pageY );
        if(el.css('display') == 'none'){
            $(".subPhoneMenu").hide();
            el.show();
            el.attr('active','true');
        }else{
            el.hide();
            el.attr('active','false');
        }
    });

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Teterichev 2 / 2 / 0 Регистрация: 04.11.2013 Сообщений: 101
	19.06.2014, 20:56
	Пару недель назад точно с такой же проблемой сталкивался. Правда не с меню,а с перетаскиваемыми элементами (прокрутка также все портила). Решил следующим образом: тому элементу, который только что перетащили, я присваивал класс с фиксированным позиционированием, а старый удалял. Хотя на деле, у Вас может оказаться все сложнее. Но может и помог 1