Появляющийся плавающий блок
|
|
[1] TokyoZero [07.11.2013, 00:39] |
Здравствуйте меня интересует как сделать Появляющийся плавающий блок как на этой странице сайта www.tourister.ru/world/america/united-states/city/miami#block_12
Там он не сдвигается с определенного места при прокрутке а именно появляется визу, когда сайт бар заканчивается. Желательно помогите разобрать способ именно как сделано на том сайте. Заранее спасибо за ответ. |
|
[2] likbezz [07.11.2013, 02:20] |
TokyoZero, Здравствуйте меня интересует как сделать Появляющийся плавающий блок как на этой странице сайта Добрый.
Что-то я не очень наблюдаю там какие либо блоки появляющиеся при прокрутке страницы до конца..
Но суть подобных везде одинакова - сравнивается высота прокрутки с высотой страницы (или с положением заданного элемента), как только она равна или больше второго аргумента, вызывается функция которая, частенько с различными эффектами, но это не суть, показывает скрытый блок. Иногда вешают и обратку - как только высота прокрутки меньше второго аргумента, блок снова скрывают.
А фиксированным его с помощью стилей - есть такое свойство - position:fixed; - у позиционируемых элементов.
Вот в принципе и все.
На том же принципе сделаны очень многие скрипты, например кнопочка [вверх] на данном и на других сайтах - при прокрутке - показывается, в топе скрывается. ..
Желательно помогите разобрать способ именно как сделано на том сайте. Внешний осмотр страницы по ссылке визуально не выявил никаких блоков - честно крутил страницу и вверх и вниз, и туда и сюда, но нет... печалька(
И почти на 100% - если вообще правильно понял о чем речь - уверен, сделано именно по данному принципу что описал, отличия могут быть лишь в эффектах и в стилевом оформлении, о чем я кстати, вообще не написал )) - ибо к самому скрипту это мало как относится. |
|
[3] TokyoZero [09.11.2013, 23:49] |
У меня есть (приложил скриншот) . Правда с Японской рекламой так как я в Токио живу возможно из за этого у вас рекламы нет. А хотя сайт то 1н. Просто у них прикольно сделано что блок не съезжает в низ когда страница до него доходит а появляется на определенном месте а при прокрутки вверх до правых блоков сам исчезает.
|
|
[4] likbezz [10.11.2013, 06:04] |
TokyoZero, Просто у них прикольно сделано что блок не съезжает в низ когда страница до него доходит а появляется на определенном месте а при прокрутки вверх до правых блоков сам исчезает. Я же объяснил - просто сравнивается высота прокрутки с фиксированной величиной и по результатам - показывают или скрывают фиксированный блок.
Типа: Код $(document).ready(function () { var top = $(document).height()-$(window).height()-500; $(window).scroll(function() { var y = $(this).scrollTop(); if (y > 500 && y < top) { $('#stikBox').fadeIn(500,function(){ $('#stikBox').addClass('fixed'); }); } else{ $('#stikBox').fadeOut(500,function(){ $('#stikBox').removeClass('fixed'); }); } }); }); Где: Код if (y > 500 && y < top) { 500 - позиция при которой показывать, можно вычесть в % от высоты прокрутки, например: - покажется на 1/3 прокрутки.
Здесь: Код var top = $(document).height()-$(window).height()-500; 500 - когда скрывать от низа. скроется при прокрутке 500 до низа. ..
☑ http://likbezz.ru/_example/_rest/stickBox/stickBox_v1.html |
|
[5] TokyoZero [10.11.2013, 10:32] |
Спасибо большое, очень помогли. |
|
[6] true [01.12.2013, 18:40] |
TokyoZero, как у вас там в японии? |
|
[7] TokyoZero [02.12.2013, 08:49] |
Вопрос не уточненный true Если погода то снега нет +15 ночью холоднее, хотя девчонки юбки как носили так и носить будут даже когда будет +6-8 в начале января:) Как говорится жизнь ключом бабло ручьем, вот пытаюсь освоить дзень по программированию:) Но суть не в этом...
Я тут поставил плавающий блок, но есть 1на проблема при входе на страницу он сверху висит чуть вниз сдвину страницу он исчезает а потом как надо появляется но он не должен проявляться сверху страницы, подскажите где косяк в коде? Код <script type="text/javascript"> $(document).ready(function () { var top = $(document).height()-$(window).height()-500; $(window).scroll(function() { var y = $(this).scrollTop(); if (y > 1500 && y < top) { $('#stikBox').fadeIn(500,function(){ $('#stikBox').addClass('fixed'); }); } else{ $('#stikBox').fadeOut(500,function(){ $('#stikBox').removeClass('fixed'); }); } }); }); </script>
Зарание спасибо Добавлено (01.12.2013, 23:09) --------------------------------------------- Все проблема решена всего то забыл добавить в стилях Добавлено (02.12.2013, 08:49) --------------------------------------------- Кстати такой вопрос, как сделать кнопку что бы пользователь мог свернуть блок но при обновлении странице или новом заходе он появлялся вновь?
Заранее спасибо |
|
[8] likbezz [02.12.2013, 08:56] |
TokyoZero, Кстати такой вопрос, как сделать кнопку что бы пользователь мог свернуть блок но при обновлении странице или новом заходе он появлялся вновь? Заранее спасибо Плавное сворачивание / разворачивание блока. jQuery
Или вот так: сворачивание+блока |
|
[9] TokyoZero [21.12.2013, 20:45] |
Спасибо большое likbezz как обычно выручаешь
Добавлено (21.12.2013, 20:16) --------------------------------------------- Пытался сделать сворачивание/разворачивание плавающего блока, что то не получается, где ошибся? При нажатии на кнопку свернуть, плавающий блок почему то просто отскакивает на самый верх страницы ну и исчезает. А не сворачивается на месте и все. Заранее спасибо Вот код: stikBox это плавающее окно а вот stikBox_in это элемент который нужно сначало свернуть при нажатии на кнопку а потом развернуть. Код <div id="stikBox"> <div class="show_link" href="#">свернуть</div> <div id="stikBox_in"> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> </div></div> </div> <script type="text/javascript"> $(function(){ $('.show_link').click(function(){ $('#stikBox_in').hide("normal"); }) $('.show_link').click(function(){ $('#stikBox_in').show("normal"); }) } </script>
А вот код самого плавающего блока. Который появляется и исчезает на определенном участке страницы. Код <script type="text/javascript"> $(document).ready(function () { var top = $(document).height()-$(window).height()-500; $(window).scroll(function() { var y = $(this).scrollTop(); if (y > 2400 && y < top) { $('#stikBox').fadeIn(500,function(){ $('#stikBox').addClass('fixed'); }); } else{ $('#stikBox').fadeOut(800,function(){ $('#stikBox').removeClass('fixed'); }); } }); }); </script>
Я если честно не понимаю почему блок просто отскакивает на верх при нажатии на кнопку свернуть а не сворачивается внутри плавающего блока.Добавлено (21.12.2013, 20:45) --------------------------------------------- Все решил вопрос следующим кодом: Код <div id="stikBox"> <a class="show_link" href="#">Свернуть</a> <div id="stikBox_in"> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> <div class="opt"></div> </div></div> </div> <script type="text/javascript"> $('.show_link').toggle(function(){ $('#stikBox_in').slideUp(2000); }, function(){ $('#stikBox_in').slideDown(2000); }); </script> Осталось только непонятно как поменять слово Свернуть после сворачивания на развернуть. Не подскажите?
Сообщение отредактировал TokyoZero - Суббота, 21.12.2013, 20:27 |
|
[10] likbezz [21.12.2013, 21:32] |
TokyoZero, Осталось только непонятно как поменять слово Свернуть после сворачивания на развернуть. Не подскажите? Все просто: Код <script type="text/javascript"> $('.show_link').toggle(function(){ $('#stikBox_in').slideUp(2000); $(this).html('Развернуть'); }, function(){ $('#stikBox_in').slideDown(2000); $(this).html('Свернуть') }); </script> http://likbezz.ru/_example/_rest/stickBox/stickBox_v2.html |
|
[11] TokyoZero [22.12.2013, 06:40] |
Спасибо большое |
|
[12] Yael [03.03.2014, 23:16] |
Здравствуйте. А можно сделать так, чтоб в миничате высвечивалось не время, когда было поставлено сообщение, а дата? |
|
[13] Tina [03.03.2014, 23:23] |
чтоб в миничате высвечивалось не время, когда было поставлено сообщение, а дата? заменить
title="$DATE$">$TIME$
на
title="$DATE$">$DATE$
Сообщение отредактировал Tina - Понедельник, 03.03.2014, 23:24 |
|
[14] Yael [04.03.2014, 02:06] |
спасибки! |
|
[15] Tina [04.03.2014, 11:23] |
Удачи! |
|