Sticky sidebar not working. Tried each and everything from stack overflow

Question

Sticky sidebar is not working at all in my website, I have tried all the things from below stack overflow threads.

How does the "position: sticky;" property work?

Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

It is not working at all on my pages. and the detailed blog post pages.

Can anyone please help me with this? you can check any post on the website for reference. https://polestartechno.com/blog/how-push-notifications-increases-user-engagements

Here is the code:

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link rel="dns-prefetch" href="//cdn.jsdeliver.net" />
    <link rel="dns-prefetch" href="//cse.google.com" />
    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />

    <!-- Preload fonts -->
    <link rel="preload" href="https://polestartechno.com/assets/css/fonts/themify.ttf?-fvbane" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="https://polestartechno.com/assets/css/fonts/themify.woff?-fvbane" as="font" type="font/woff" crossorigin>
    <link rel="preload" href="https://polestartechno.com/assets/css/fonts/ElegantIcons.woff" as="font" type="font/woff" crossorigin>
    <link rel="preload" href="https://polestartechno.com/assets/css/fonts/ElegantIcons.ttf" as="font" type="font/ttf" crossorigin>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pstc_css@1.1.0/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pstc_css@1.1.0/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://polestartechno.com/assets/css/allinone2.css">
</head>
<body>

    <div class="body_wrapper">
        <!--php header view-->

        <section class="blog_breadcrumb_area" style="background: url(https://polestartechno.com/assets/img/hosting/hosting_action_bg.png) no-repeat scroll center 0 / cover;">
            <div class="background_overlay"></div>
            <div class="container">
                <div class="breadcrumb_content_two text-center">
                    <h1><?php echo $page['title']; ?></h1>
                </div>
            </div>
        </section>

        <section class="blog_area_two sec_pad">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 blog_single_info">
                        <div class="blog_list_item blog_list_item_two">
                            <article>
                                <a href="#" class="post_date">
                                    <h2><!--date using php--></span></h2>
                                </a>
                                <img class="img-fluid" data-src="<?php echo base_url().'uploads/posts/feature_img/'.$post['feature_img']; ?>" alt="<?php echo $page['title']; ?>" width="100%">
                                <div class="blog_content">
                                    <?php echo $page['content']; ?>
                                </div>
                            </article>
                        </div>
                        <div class="post-info-bottom">
                        </div>
                        <div class="media post_author_two">
                            <img class="img_rounded" src="<?php echo base_url().'uploads/'.$post['profile_img']; ?>" alt="<?php echo $post['first_name']." ".$post['last_name']; ?>">
                            <div class="media-body">
                                <div class="comment_info">
                                    <h3><?php echo $post['first_name']." ".$post['last_name']; ?></h3>
                                </div>
                                <p><?php echo $post['description']; ?></p>
                            </div>
                        </div>
                        <?php if(count($relatedPosts) > 0){ ?>
                        <div class="blog_related_post blog_grid_info">
                            <h2 class="blog_titles">Related Post</h2>
                            <div class="row">
                                <?php foreach ($relatedPosts as $relatedPost) { ?>
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="blog_list_item blog_list_item_two">
                                            <a href="<?php echo base_url().'blog/'.$relatedPost['url']; ?>" class="post_date">
                                                <h2>12 <span>Dec</span></h2>
                                            </a>
                                            <a href="<?php echo base_url().'blog/'.$relatedPost['url']; ?>"><img class="img-fluid" data-src="<?php echo base_url().'uploads/posts/feature_img/'.$relatedPost['feature_img']; ?>" alt="<?php echo $relatedPost['title']; ?>" ></a>
                                            <div class="blog_content">
                                                <a href="<?php echo base_url().'blog/'.$relatedPost['url']; ?>">
                                                    <h5 class="blog_title"><?php echo $relatedPost['title']; ?></h5>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                        <?php } ?>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-sidebar">
                            <div class="widget sidebar_widget search_widget_two">
                                <form action="#" class="search-form input-group">
                                    <input type="search" class="form-control widget_input" placeholder="Search">
                                    <button type="submit"><i class="ti-search"></i></button>
                                </form>
                            </div>
                            <div class="widget sidebar_widget recent_post_widget_two mt_60">
                                <h3 class="widget_title_two">Recent posts</h3>
                                <?php foreach ($recentPosts as $recentPost) { ?>
                                    <div class="media post_item">
                                        <img width="75px" data-src="<?php echo base_url().'uploads/posts/feature_img/'.$recentPost['feature_img']; ?>" alt="<?php echo $recentPost['title']; ?>">
                                        <div class="media-body">
                                            <a href="<?php echo base_url().'blog/'.$recentPost['url']; ?>">
                                                <h3><?php echo $recentPost['title']; ?></h3>
                                            </a>
                                            <a href="<?php echo base_url().'blog/'.$recentPost['url']; ?>" class="entry_post_info"><?php echo date("F d, Y", strtotime($recentPost['date'])); ?></a>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                            <div class="widget sidebar_widget categorie_widget_two mt_60">
                                <h3 class="widget_title_two">Categories</h3>
                                <ul class="list-unstyled">
                                    <?php foreach ($categories as $category) { ?>
                                        <li> <a href="<?php echo base_url().'blog/category/'.str_replace(" ", "-", $category['name']); ?>"><span><?php echo $category['name']; ?></span><em>(<?php echo $category['count']; ?>)</em></a> </li> 
                                    <?php } ?>
                                </ul>
                            </div>
                            <div class="widget sidebar_widget tag_widget_two mt_60">
                                <h3 class="widget_title_two">Tags</h3>
                                <div class="post-tags">
                                    <?php foreach ($tags as $tag) { ?>
                                        <a href="<?php echo base_url().'blog/tag/'.str_replace(" ", "-", trim($tag)); ?>"><?php echo $tag; ?></a>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="icon-bar1 d-none d-md-block">
          <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo current_url();?>" class="facebook" target="_blank"><i class="ti-facebook"></i></a> 
          <a href="https://twitter.com/share?url=<?php echo current_url();?>" class="twitter" target="_blank"><i class="ti-twitter"></i></a> 
          <a href="https://www.linkedin.com/shareArticle?url=<?php echo current_url();?>&title=<?php echo $page['title']; ?>" class="linkedin" target="_blank"><i class="ti-linkedin"></i></a>
          <a href="mailto:?&subject=<?php echo $page['title']; ?>&body=<?php echo current_url();?>" class="youtube" target="_blank"><i class="ti-email"></i></a> 
        </div>

        <?php $this->view("layouts/common/footer"); ?>
    </div>
    <!-- Optional JavaScript -->
    <!-- differ.js -->    
    <script src="//cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="deferjs" src="https://polestartechno.com/assets/js/jquery-3.2.1.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/js/propper.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/js/bootstrap.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/bootstrap-selector/js/bootstrap-select.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/wow/wow.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/sckroller/jquery.parallax-scroll.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/owl-carousel/owl.carousel.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/nice-select/jquery.nice-select.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/isotope/isotope-min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/magnify-pop/jquery.magnific-popup.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/circle-progress/circle-progress.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/counterup/jquery.counterup.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/counterup/jquery.waypoints.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/counterup/appear.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/scroll/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/js/plugins.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/multiscroll/jquery.easings.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/multiscroll/multiscroll.responsiveExpand.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/multiscroll/jquery.multiscroll.extensions.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/js/main.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/jquery-validation-1.19.1/dist/jquery.validate.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/vendors/jquery-validation-1.19.1/dist/additional-methods.min.js"></script>
    <script type="deferjs" src="https://polestartechno.com/assets/js/custom.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.5.0/dist/lazyload.min.js"></script>
</body>
</html>

its great u typed what u research but ,give the code to edit and give answer — Neptotech -vishnu, Jan 21 '22 at 12:01
@Neptotech-vishnu I thought you can access it from the page itself by inspecting elements from the browser. As the code is too big. — ghanshyam, Jan 21 '22 at 12:17
no inspecting don't provide full code else all websites will be hacked right? so provide code here(copy paste) — Neptotech -vishnu, Jan 21 '22 at 12:52
This link will help you create the sort of code snippet we need in order to be able to help. https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Jan 21 '22 at 12:58
@Neptotech-vishnu have added the code in the question. Please do check. — ghanshyam, Jan 22 '22 at 11:22

score 2 · Accepted Answer · answered Jan 22 '22 at 12:17

Examined your website and there is a problem with body overflow, which prevents sticky to run correctly. You need to set:

.body_wrapper {
    overflow: visible;
}

Also, your blog sidebar has no class to set css, but if you add it, than you could use:

.my_sidebar {
    align-self: flex-start;
    position: sticky;
    top: 70px;
}

score 0 · Answer 2 · answered Jun 24 '22 at 16:00

0

sometimes developers set css property overflow-x: hidden to body to remove sudden scrolls and that is why position: sticky doesn't work any component on page

answered Jun 24 '22 at 16:00

Scrooppi

267
3
6

Sticky sidebar not working. Tried each and everything from stack overflow

2 Answers2