Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как реализовать плавающий блок в сайтбаре?

Как реализовать плавающий блок в сайтбаре?

     12.11.2015    Стили (CSS), jQuery    1252

вопрос
Здравствуйте. Подскажите, как можно реализовать плавающий блок на сайте? Чтобы при скролинге, блок опускался вниз и вверх.

Ответа пока нет

 

5 комментариев

misha-koder
Юзер

misha-koder - 13 ноября 2015 06:09 -

position: fixed;
baseroad
Юзер

baseroad - 14 ноября 2015 12:20 -

Почему-то не помогло
mastodontoff
Юзер

mastodontoff - 14 ноября 2015 14:52 -

baseroad
Юзер

baseroad - 14 ноября 2015 15:06 -

Можете подсказать как там устанавливаеться, а то я нечего не понял с сайта...))))
mastodontoff
Юзер

mastodontoff - 14 ноября 2015 15:15 -

Можно проще,
для наглядности вот тут нарисовал http://jsfiddle.net/njou90f3/

Просто добавляете в main.tp и куда вам больше нравится скрипт, главное чтобы он подгрузился у вас на странице

<script type="text/javascript">
$(function() {
     var offset = $("#fixed").offset();
     var topPadding = 150, //отступ сверху
         bottomPadding = 370; //высота над которой остоновится
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#fixed").stop().animate({
                 marginTop: 0
             });
         };
     });
 });
</script>


А блок который вы желаете, чтобы двигался ставите между 

<div id="fixed">.....</div>
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 25.08.2011 Гость  Стили (CSS)
 21.01.2014 thirus  Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
 04.03.2014 thirus  Общие вопросы, Общие вопросы по вёрстке, Стили (CSS), jQuery, Общие вопросы по PHP
 05.04.2014 Serhio  Стили (CSS), jQuery
 21.04.2014 MrDreamer  Шаблоны (TPL), Стили (CSS)
 26.04.2014 panov  Шаблоны (TPL), Стили (CSS)
 01.06.2014 prolight  Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Ламерские вопросы
 12.10.2014 Crashlabs  Общие вопросы, Стили (CSS)
 26.07.2015 DomiTori  Стили (CSS), Ламерские вопросы
 19.08.2015 AleksMey  Стили (CSS)
  • PunPun | Как сделать поиск по дополнительным поля ...
    Фото PunPun
    PunPun
    Как сделать поиск по дополнительным полям только из определенных категорий?
    Сегодня, 07:01
    В /engine/engine.php найти
    if (count ( $xf_array )) {
    Выше вставить

    1. Для всех доп полей будет только категория с id 2 и 3.
    $stop_list = "category regexp '[[:<:]](2|3)[[:>:]]' AND ";


    2. Для определенного доп. поля
    if ($xfname == 'pole') {
    $stop_list = "category regexp '[[:<:]](2|3)[[:>:]]' AND ";
}


    3. Для определенного доп. поля и его значения
    if ($_GET['xf'] == 'pole/bla-bla/') {
    $stop_list = "category regexp '[[:<:]](2|3)[[:>:]]' AND ";
}
  • PunPun | Как убрать кнопку ПС из модального окна?
    Фото PunPun
    PunPun
    Как убрать кнопку ПС из модального окна?
    Сегодня, 06:52
    Правкой /engine/classes/js/dle_js.js найти и удалить
    5!=dle_group&&(b[menu_send]=function(){DLESendPM(dle_user_profile)});
    Либо вставить перед тегом 
    </body>
    этот код
    <script>
jQuery(function($){
    ShowPopupProfile = function(a,c){var b={};b[menu_profile]=function(){document.location=dle_user_profile_link};1==c&&(b[menu_uedit]=function(){$(this).dialog("close");var a={};$("body").append('<div id="modal-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #666666; opacity: .40;filter:Alpha(Opacity=40); z-index: 999; display:none;"></div>');$("#modal-overlay").css({filter:"alpha(opacity=40)"}).fadeIn("slow");$("#dleuserpopup").remove();$("body").append("<div id='dleuserpopup' title='"+menu_uedit+"' style='display:none'></div>");a[dle_act_lang[3]]=function(){$(this).dialog("close");$("#dleuserpopup").remove()};a[dle_act_lang[5]]=function(){window.frames.edituserframe.confirmDelete(dle_login_hash)};a[dle_act_lang[4]]=function(){document.getElementById("edituserframe").contentWindow.document.getElementById("saveuserform").submit()};$("#dleuserpopup").dialog({autoOpen:!0,show:"fade",width:700,resizable:!1,dialogClass:"modalfixed dle-popup-userprofileadmin",buttons:a,open:function(a,b){$("#dleuserpopup").html("<iframe name='edituserframe' id='edituserframe' width='100%' height='400' src='"+dle_root+dle_admin+"?mod=editusers&action=edituser&user="+dle_user_profile+"&skin="+dle_skin+"' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>")},beforeClose:function(a,b){$("#dleuserpopup").html("")},close:function(a,b){$("#modal-overlay").fadeOut("slow",function(){$("#modal-overlay").remove()})}});830<$(window).width()&&530<$(window).height()&&($(".modalfixed.ui-dialog").css({position:"fixed"}),$("#dleuserpopup").dialog("option","position",{my:"center",at:"center",of:window}))});$("#dleprofilepopup").remove();$("body").append(a);$("#dleprofilepopup").dialog({autoOpen:!0,show:"fade",hide:"fade",resizable:!1,dialogClass:"dle-popup-userprofile",buttons:b,width:550});return!1};
});
</script>
  • PunPun | Как отключить перекрестную ссылку у доп. ...
    Фото PunPun
    PunPun
    Как отключить перекрестную ссылку у доп. поля через custom?
    Сегодня, 04:58 
    [xfvalue_test limit="999"]
  • oleh | Как реализовать блоки внимания в статьях ... 2
    Фото oleh
    oleh
    Как реализовать блоки внимания в статьях DLE?
    Сегодня, 00:30
    Доп поля не особо подойдут, потому как нужны по сути только доп кнопки в редакторе, которые будут выделенный текст обрамлять тегами типа [vnimanie] текст [/vnimanie], и потом уже в css накатывать стили на все что в рамках данного тега. Но вот решения не нашел еще, есть какие-то намеки, но под старые версии и немного не тот замысел
  • bakashev | Адресация на AMP-страницы в DLE? 8
    Фото bakashev
    bakashev
    Адресация на AMP-страницы в DLE?
    Вчера, 18:52
    Есть один минус. В соцсеть (VK) перестали тянуться картинки с сайта.
  • bakashev | Адресация на AMP-страницы в DLE? 8
    Фото bakashev
    bakashev
    Адресация на AMP-страницы в DLE?
    Вчера, 17:58
    Спасибо! Всё работает!
  • vitnet | Адресация на AMP-страницы в DLE? 8
    Фото vitnet
    vitnet
    Адресация на AMP-страницы в DLE?
    Вчера, 15:29
    1.0 Открыть файл engine/engine.php

    Найти
    if ($canonical) {

	$metatags .= <<<HTML

<link rel="canonical" href="{$config['http_home_url']}" />
HTML;

}

    Добавить ниже
    if( $subaction == "showfull" ) {
	$metatags.= <<<HTML
    <link rel="amphtml" href="{$amp_link}" />
HTML;
}

    2.0 Открыть файл engine/modules/show.full.php

    Найти
    				$short_link = $config['http_home_url'] . $c_url . "/";

    Добавить выше
    				$amp_link = $config['http_home_url'] . "amp/" . $c_url . "/";

    Далее найти
    				$short_link = $config['http_home_url'];

    Добавить выше
    				$amp_link = $config['http_home_url'] . "amp/";

    Далее найти
    			$short_link = $config['http_home_url'] . date( 'Y/m/d/', $row['date'] );

    Добавить выше
    			$amp_link = $config['http_home_url'] . "amp/" . date( 'Y/m/d/', $row['date'] );

    Далее найти
    		$tpl->set( '{short-story}', $row['short_story'] );

    Добавить ниже
    	$amp_link = $amp_link . $news_name . ".html";
	$tpl->set( '{amp_link}', $amp_link );

    При желании в шаблоне fullstory.tpl можно использовать тег {amp_link}
  • Pringles | Модуль push-уведомления для DLE 6
    Фото Pringles
    Pringles
    Модуль push-уведомления для DLE
    Вчера, 14:45
    https://coderiz.pw/works/plugins/27-modul-push-uvedomleniy-dle-98-131-pushsignal-41.html
  • putnik | Как правильно вставить картинку между ша ...
    Фото putnik
    putnik
    Как правильно вставить картинку между шапкой сайта и основным контентом?
    Вчера, 14:22
    криво код до этого вставил,вот тут ровнее
    
<div class="navbar-collapse collapse">
	<ul class="navbar-nav">
	<li class="active"><a href="/" >Главная</a></li>
	<li><a href="/" >Форум</a></li>
	<li><a href="/" >Новости</a></li>
	<li><a href="/kontakty.html" >Контакты</a></li>
	<li><a href="/kak-zakazat.html" >Как заказать товар</a></li>
		</ul>
		</div>
                 <div class="counters-box">
		<img src="{theme}/images/priroda.jpg"class="background1" alt="#" />
		</div>
		</div>
		</div>
  • maks | Повышается ли вероятность взлома сайт dl ... 1
    Фото maks
    maks
    Повышается ли вероятность взлома сайт dle если разрешить выполнение php в шаблонах?
    Вчера, 13:13
    В dle это делается так https://dle-news.ru/extras/online/index.html?modules_include.html
наверх