Как сделать неподвижный плавающий блок справа?

голоса: 0
Подскажите легенький скрипт для закрепления блока при прокрутке страницы.  Подробнее.  На сайте существует сайд бар с несколькими блоками. И при прокрутке, так как они не закреплены, вместе с остальным содержимым уползают наверх при прокрутке.  В одном блоке находися меню категории, к которой относится просматриваемая страница.  Как закрепить этот блок меню, что бы он ""прилипал" к верхнему краю и не уползал, оставаясь всегда на экране?
Адрес сайта https://ex-hort.ru/
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
 
Лучший ответ

Пример простого скрипта для решения вашего вопроса, вы можете найти в материале - здесь. Скрипт полностью рабочий и проверенный. 

Только с данного решения не вставляйте себе скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

он не нужен так как используется системная библиотека от Юкоз.

| Автор:
Выбор ответа лучшим | | Автор: Фёдор Тимофеев
Yuri_Geruk,
Как так вот же: http://joxi.ru/DrlgPPktvBzdJA  http://joxi.ru/KAxBRREtMOG8zm  http://joxi.ru/J2bgEELtXNe5nA     А при просмотре кода страницы его нет, почему? Или его целиком прописать в <head> а не указывать путь к файлу??
Фёдор Тимофеев,

Лучше пропишите вне файла как я приводил пример в сообщении выше. Прописать перед </body>

Yuri_Geruk,
Выполнил все рекомендации http://joxi.ru/Vm6ZeeWcDJnbVm На странице ничего не происходит (http://wmz-online.ucoz.ru/publ/)  Это становиться интересным.  У кого какие мысли, почему не работает скрипт?
Фёдор Тимофеев,

Вот пример на странице https://9bclass.ucoz.ru/blogs/ я завернул блок поиск в данный скрипт. Все работает. И перед боди вы не вставили скрипт:

<script type="text/javascript">
$(window).scroll(function() {
    var sb_m = 20; /* отступ сверху и снизу */
    var mb = 300; /* высота подвала с запасом */
    var st = $(window).scrollTop();
    var sb = $(".sticky-block");
    var sbi = $(".sticky-block .inner");
    var sb_ot = sb.offset().top;
    var sbi_ot = sbi.offset().top;
    var sb_h = sb.height();
 
    if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
        if(st > sb_ot) {
            var h = Math.round(st - sb_ot) + sb_m;
            sb.css({"paddingTop" : h});
        }
        else {
            sb.css({"paddingTop" : 0});
        }
    }
});
</script>

потому и не работает.

Yuri_Geruk,

Разобрался только после фразы:  

я завернул блок поиск в данный скрипт

Мои ошибки: 

1. Вставлял скрипт в шаблонах для редактирования, куда угодно (Страница материалов и комментарии, страницы сайта, и прочие). Надо вставлять скрипт, и блок - прилипалу, только в один шаблон (например "Первый контейнер")

2. Не очищал кэш (не всегда)

3. Считал, что советы не верные. (простите)

4. Не корректно задавал вопросы.

5. Пытался заставить "прилипать" блок стоящий между другими. Надо, заворачивать в скрипт, только самый нижний.

Огромное человеческое спасибо Yuri_Gerukimage и webanetimage.  За терпение и помощь.

 

...