Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » jQuery: Прокрутка страницы

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Привет всем!
 
Есть такой скрипт на джикери, создает меню, и плавную прокрутку страницы к заякоренным блокам, при этом меню прокручивается вместе со страницей благодаря position: fixed;
 
Но возникла проблема. Меню отображается в аккурат в левом верхнем углу, а у меня шапка 250px, и меню задумано ПОД шапкой. Опустить его не могу, т.к. если задать  
 
#menu{
position: fixed;
top: 250px;
}
 
То при прокрутке страницы меню будет все время отступать 250 пикселей А мне нужно чтобы меню прокручивалось не сразу, а только когда достигнет верхней границы экрана при прокрутке. Эффект желаемый можно увидеть вот здесь (ссылка: http://www.docteurbourdon.be/  ). Нажмите на любой пункт меню.
 
Не знаю прям, что и делать(

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 23:51 12-04-2011 | Исправлено: Cheery, 02:06 13-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
ну и в чем траббл?
делаете абсолютную позицию где надо
далее следите за прокруткой, как только она больше позиции элемента - "отпускаете" его
если равна или меньше - "цепляете"

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:07 13-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А поподробней можно? я не очень разбирающийся, скажите хоть, что почитать и о чем )

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 01:15 13-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
ну просто же (( что там читать?

Код:
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>250) $('#scrollable').css('top', $(this).scrollTop() + "px");
         else $('#scrollable').css('top', "250px");
});
</script>
<div id='scrollable' style='border:1px solid black; width:100px;position:absolute;left:0;top:250px;'>
Скроллируем ЭТО
</div>  


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:06 13-04-2011 | Исправлено: Cheery, 02:08 13-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
О, спасибо, работает : )))
 
только при скроллинге как то...мерцает что ли...дергается слегка. Ну ничего.

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 03:28 13-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
я привел лишь пример.. можно сделать и кучей других способов
например без мерцания

Код:
<script>
$(window).scroll(function() {
    if ($(this).scrollTop()>250) $('#scrollable').css({'position':'fixed','top':'0px'});
         else $('#scrollable').css({'top':'250px','position':'absolute'});
});
</script>


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:31 13-04-2011 | Исправлено: Cheery, 03:31 13-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery, вы гений! и вообще хороший человек, спасибо большое!!!!!!!!!

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 03:35 13-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А еще такой вопрос, если конечно, у вас найдется какой то легкий способ его решения
 
Есть меню, которое я, собственно, сделал с вашей помощью  
 
<div id="scrollable" style='border:1px solid black; width:900px;position:absolute;left:500px;top:250px;'>
<a href="#" onClick="Animate2id('#c1');return false">Content 1</a>
<a href="#" onClick="Animate2id('#c2');return false">Content 2</a>
<a href="#" onClick="Animate2id('#c3');return false">Content 3</a>
<a href="#" onClick="Animate2id('#c4');return false">Content 4</a>
<a href="#" onClick="Animate2id('#c5');return false">Content 5</a>
</div>
 
Ну и блоки, к которым прокрутка будет
<div id="content">
<div id="c1">Content 1</div>
<div id="c2">Content 2</div>
<div id="c3">Content 3</div>
<div id="c4">Content 4</div>
<div id="c5">Content 5</div>
</div>
(Я использую скрипт прокрутки страницы к якорям на джикери.)
 
Так вот, хотелось бы, чтобы при нажатии на пункт меню, кроме прокрутки страницы еще и выделялся активный пункт меню.  По умолчанию хотелось бы выделить самый первый пункт. Я понимаю, что нужно прописать в стилях класс active для активного пункта, но как сделать переключение, не знаю...

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 02:51 14-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
ну так выставляяйте в функции Animate2id стиль для ссылки, удаляя его для предыдущей

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 03:27 14-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Осмелюсь спросить, как именно) Я просто не знаю, как синтаксически это сделать. Погуглю еще.
 
<a href="#" onClick="Animate2id('#c1');return false;class='active'">Content 1</a>
 
Уверен, что догадка ошибочна

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 15:56 14-04-2011 | Исправлено: kulativv, 15:57 14-04-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
если вы хотите делать подобные вещи - изучайте javascript+jquery (не методом тыка)
здесь же не "стол заказов" )
 Animate2id('#c1');highlight(this);return false
 
и описываете функцию в js
function highlight(obj)
{
$('#scrollable a").removeClass('highlight');
$(obj).addClass('highlight');
}
 
где стиль highlight описывает нужное вам выделение

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 20:39 14-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо большое за помощь, завтра проверю ваш код!

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 02:31 15-04-2011 | Исправлено: kulativv, 14:03 16-04-2011
Agent_SMIT



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Глянь плагин этот, полезным окажется точно
http://imakewebthings.github.com/jquery-waypoints/

----------
Человек, который осмеливается потратить впустую час времени, ещё не осознал цену жизни.
© Чарльз Дарвин

Всего записей: 997 | Зарегистр. 20-04-2006 | Отправлено: 15:56 16-04-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Cheery
, к сожалению, не работает. Вставляю указанную вами функцию в хэдэре, ломается прокрутка...
 
 
<script>  
$(window).scroll(function() {  
    if ($(this).scrollTop()>300) $('#scrollable').css({'position':'fixed','top':'0px'});  
         else $('#scrollable').css({'top':'300px','position':'absolute'});  
});  
 
function highlight(obj)  
 {  
 $('#scrollable a").removeClass('highlight');  
 $(obj).addClass('highlight');  
 }
</script>
 

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 04:07 09-05-2011
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
kulativv
все работает
ссылку на страницу

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 06:33 09-05-2011
kulativv



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Да на локале... Скорее всего конфликт со скриптом прокрутки.

Всего записей: 76 | Зарегистр. 19-02-2006 | Отправлено: 14:23 09-05-2011
felixml

Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте ! А как остановить блок на определенном месте?  
чтобы он на нужном мне месте останавливался( прокручивался вместе со страницей?)
 
<div class="ppp">
<script>
var obj = $('.ppp');
var offset = obj.offset();
var topOffset = offset.top;
var marginTop = obj.css("marginTop");
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
        if (scrollTop < topOffset){
                obj.css({
                        marginTop: 1,
                        position: 'relative',
                });
        }
        if (scrollTop >= topOffset){
                obj.css({
                        marginTop: -395,
                        position: 'fixed',
                         
                });
        }
});
</script>

Всего записей: 1 | Зарегистр. 25-07-2013 | Отправлено: 12:15 25-07-2013
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
felixml

Цитата:
А как остановить блок на определенном месте?  
чтобы он на нужном мне месте останавливался( прокручивался вместе со страницей?)  

в смысле? чтобы он был фиксирован до определенной прокрутки страницы, а далее скроллировался с ней в последнем положении?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 19:50 25-07-2013
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » jQuery: Прокрутка страницы


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru