|
Появляющийся плавающий блок
|
|
| [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] |
Удачи! |
|