粘性侧边栏不起作用。尝试了堆栈溢出的所有内容

Question

粘性侧边栏在我的网站上根本不起作用，我已经尝试了堆栈溢出线程下面的所有内容。

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

它在我的页面上根本不起作用。以及详细的博客 post 页。

谁能帮我解决这个问题？您可以在网站上查看任何 post 以供参考。 https://polestartechno.com/blog/how-push-notifications-increases-user-engagements

代码如下：

<!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>

Answer 1

检查了您的网站，正文溢出存在问题，导致无法正确粘贴到运行。您需要设置：

.body_wrapper {
    overflow: visible;
}

此外，您的博客侧边栏没有 class 设置 css，但如果您添加它，则可以使用：

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

粘性侧边栏不起作用。尝试了堆栈溢出的所有内容

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

html

css

sticky

bootstrap-4