Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.79/84: Рейтинг темы: голосов - 84, средняя оценка - 4.79
 Аватар для Mailo
248 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,312

Подсчитать расстояние от верхнего конца экрана и задать поведение меню

21.12.2012, 22:23. Показов 17083. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Хочу сделать так, что бы горизонтальное меню, которое находится в центре сайта прилеплялось к верху браузера при прокрутке вниз. Для этого, как я понял необходимо сосчитать в пикселях расстояние от меню до "верха" сайта, а потом эту высоту как то привязать к posotion:fixed;. Не подскажите как это реализовать на JQ?
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
21.12.2012, 22:23
Ответы с готовыми решениями:

При создании верхнего меню снизу дублируются это же меню
При создании верхнего меню снизу дублируются это же меню.помогите..

OpenGL1.0 Как вычислить Y-координату верхнего края экрана?
прошу прощение, но не смог нагуглить. Вроде совсем и не должно здесь быть проблемы, но расклад такой: есть контекст огла. Задаю...

Условие при расстоянии от верхнего края экрана до элемента
Приветствую! Такая задача: Идут два блока один за другим. Первый блок высотой 100%, при скролинге когда расстояние от начала второго...

6
 Аватар для Daredevi1
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
22.12.2012, 14:12
Вот простой пример.
HTML5
1
<div class='menu'></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
body {
    height: 3000px;
}
 
.menu {
    width: 100%;
    height: 50px;
    position: relative;
    top: 200px;
    background-color: red;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var menu = $('.menu');
 
var defPos = menu.css('position'),
    defTop = menu.offset().top;
 
$(window).on('scroll', function(){
    if (defTop - ($('body').scrollTop() || $('html').scrollTop()) <= 0) {
        menu.css({
            'position': 'fixed',
            'top': '0'    
        });                    
    } else {
        menu.css({
            'position': defPos,
            'top': defTop        
        });
    }
});
http://jsfiddle.net/fPJrL/3/
1
 Аватар для Mailo
248 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,312
22.12.2012, 17:48  [ТС]
На каком то сайте нашёл немного покороче, но суть та же:

JavaScript
1
2
3
4
5
6
7
8
9
$(window).scroll(function(){    
    if ($(this).scrollTop()>560)
    {
        
        $("#tabs").css({"position":"fixed","top":"41px","width":"956px"});      
    }else{
        $("#tabs").css({"position":"static"});
    }
});

P.S. Срабатывает почему то даже без $(document).ready(function() {, может этот window какой то особенный
0
0 / 0 / 0
Регистрация: 15.11.2017
Сообщений: 4
17.05.2018, 16:23
Потому что scroll-событие, такое же как и ready. Пока не случится скролл, скрипт не будет выполняться, а как случится, так функция в событие вызовется и выполнится.
0
0 / 0 / 0
Регистрация: 15.02.2014
Сообщений: 9
15.01.2020, 16:25
Блин класная тема но ответы мимо.
Эти скрипты работают, если вы знаете что конкретно Ваш блок стоит на 560 пикселев от верха. А если блок может стоять на любом растоянии от верха экрана ,в зависимости от разрешения устрйоства, как тогда быть? Надо сначала както узнать текущее положение а потом уже гороить
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3940 / 2043 / 829
Регистрация: 13.03.2010
Сообщений: 6,720
15.01.2020, 16:31
Лучший ответ Сообщение было отмечено gogolik как решение

Решение

Андрей Магистр, на одном из своих проектов делал, вроде бы где-то в гугле стырил:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var $nav = $('.blk'); //блок, который нужно зафиксировать
var $win = $(window); //окно
var winH = $win.height(); //высота окна
$win.on('scroll', function () {
    if ($(this).scrollTop() > winH ) {
        $('body').addClass('p100'); //добавляю padding-top: 100 для body, так как блок высотой 100px
        $nav.addClass('active'); // добавляю класс active для блока, в котором position: fixed
    } else { // обратные действия
        $('body').removeClass('p100');
        $nav.removeClass('active');
    }
}).on("resize", function(){ //чтобы при ресайзе окна не ломалось ничего
    winH = $(this).height();
});
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
15.01.2020, 17:43
JavaScript
1
2
3
$(window).scroll(function(){
    $('#menu').css("top", $(window).scrollTop());
});
у меня так
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
15.01.2020, 17:43
Помогаю со студенческими работами здесь

Cимволы, которые «сыплются» с правого верхнего угла экрана
Падающий текст. Из текстового файла читаются символы, которые «сыплются» с правого верхнего угла экрана.

Получить и задать координаты левого верхнего угла формы
1. Я нажимаю Button1 и на экран MessageBox.Show высвечиваются координаты формы. (левый верхний угол.) Как это сделать? 2. Я ввожу в...

Как задать ввод только букв верхнего регистра?
Народ. как в Python Tkinter задать ввод только букв верхнего регистра? и чтобы при вводе цифр выдавал ошибку. а на 4 попытку ввода...

Осуществить перемещение символа по спирали, начиная с левого верхнего угла экрана
Ввести произвольный символ с клавиатуры. Осуществить перемещение этого символа по спирали, начиная с левого верхнего угла экрана.

Движение окружности по диагонали из правого верхнего в левый нижний угол экрана
Сделайте программу, пожалуйста. Написать программу движения по экрану окружности радиусом 10 по диагонали из правого верхнего в левый...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
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-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru