1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Прилипающий сайдбар на sticky-kit

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем iga, 9 янв 2019.

  1. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    На странице https://steptosea.com/catalog/ имеется прилипающий сайдбар.
    Прилипание основано на https://codepen.io/zafree/pen/rjvBEg
    В код скриптов не влезал. Просто вставил в свой data- в нужные дивы.
    Всё отрабатывает отлично, но почему-то при скролле и прилипании сайдбар смещается право, а внизу опять встаёт на своё место.
    Сайт на WP. Код шаблона вывода:
    PHP:
    <?php
    /*
    Template Name: Все объекты
    */
    get_header(); ?>
    <section>
        <div class="container">
            <div class="row" data-sticky_parent>
                    <div class="col-md-3 col-md-push-9 all-obj-sidebar" data-sticky_column>
                        <?php $action_template get_template_directory() . '/templates/all-obj-sidebar.php';
                            require_once ( 
    $action_template );
                        
    ?>
                        <?php dynamic_sidebar'all-obj-sidebar' ); ?>
                    </div>
                <div class="col-md-9 col-md-pull-3">
                    <div class="row text-right">
                        <div class="col-xs-12">
                            <?php echo do_shortcode('[facetwp sort="true"]'); ?>
                        </div>
                    </div>
                    <h1><?php single_cat_title(); ?></h1>
                        <?php
                            $args 
    = array(
                                   
    'post_type' => 'buildings',
                                   
    'publish' => true,
                                   
    'paged' => get_query_var('paged'),
                               );
                            
    query_posts($args);
                            if (
    have_posts()) : while (have_posts()) : the_post();
                        
    ?>
                        <?php get_template_part('/templates/loops/loop'); ?>
                    <?php endwhile;
                    else: echo 
    '<p>Нет записей.</p>'; endif; ?>
                    <?php echo do_shortcode('[facetwp load_more="true" label="Загрузить ещё"]'); ?>
                </div>
            </div>
        </div>
    </section>
    <?php get_footer(); ?>
    Сразу после публикации этого поста заметил, что все начинает отрабатывать правильно, если убрать bootstrap push и pull.
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Смещается потому, что там какие-то зверские стили навешиваются.

    Всё можно сделать вообще без js и намного проще. Посмотрите position: sticky.
     
    0micron и iga нравится это.
  3. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    и ещё постоянно меняются
    Вот я и начал с чистого css, но потом нарвался на эту хреновину и решил не изобретать велосипед. Но у велосипеда восьмёрка на колесе получилась, поэтому придётся переделывать в блокнотике с нуля.
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А получился именно велосипед.

    Посмотрите position: sticky - это всё, что вам нужно!
     
    0micron и iga нравится это.
  5. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Да я ещё тогда увидел, что это то, что надо! Но, видимо, думать было лень...а тут и готовое решение гугл подбросил! :Smile: