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

@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');
        }
    });

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

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