滚动时如何让侧边栏对齐到顶部？

Posted 2023-03-06

【中文标题】滚动时如何让侧边栏对齐到顶部？

【英文标题】：How do I get my sidebar to snap to the top when scrolling?

【发布时间】：2016-08-11 22:59:09

【问题描述】：

我有一个在顶部偏移 91 像素的侧边栏，以容纳页面顶部的导航栏标题，它在滚动时移动，但我希望它在滚动通过导航栏标题时捕捉到顶部。有谁知道我需要添加什么 CSS 以使侧边栏在被导航栏标题滚动时捕捉到顶部？请注意，我正在使用带有 wordpress 的引导程序。

CSS：

#secondary 
    position: fixed;
    right: 0;
    padding: 15px;
    z-index: 1000;
    top: 91px;
    height: 350px;
    width: 250px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #fd0e35;
    overflow-y: auto;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

html：

<aside id="secondary" class="widget-area" role="complementary">
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

<?php do_action( 'woocommerce_before_mini_cart' ); ?>

<ul class="cart_list product_list_widget <?php echo $args['list_class']; ?>">

    <?php if ( ! WC()->cart->is_empty() ) : ?>

        <?php
            foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) 
                $_product     = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
                $product_id   = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

                if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) ) 

                    $product_name  = apply_filters( 'woocommerce_cart_item_name', $_product->get_title(), $cart_item, $cart_item_key );
                    $thumbnail     = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
                    $product_price = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
                    ?>
                    <li class="<?php echo esc_attr( apply_filters( 'woocommerce_mini_cart_item_class', 'mini_cart_item', $cart_item, $cart_item_key ) ); ?>">
                        <?php
                        echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
                            '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                            esc_url( WC()->cart->get_remove_url( $cart_item_key ) ),
                            __( 'Remove this item', 'woocommerce' ),
                            esc_attr( $product_id ),
                            esc_attr( $_product->get_sku() )
                        ), $cart_item_key );
                        ?>
                        <?php if ( ! $_product->is_visible() ) : ?>
                            <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name . '&nbsp;'; ?>
                        <?php else : ?>
                            <a href="<?php echo esc_url( $_product->get_permalink( $cart_item ) ); ?>">
                                <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name . '&nbsp;'; ?>
                            </a>
                        <?php endif; ?>
                        <?php echo WC()->cart->get_item_data( $cart_item ); ?>

                        <?php echo apply_filters( 'woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf( '%s &times; %s', $cart_item['quantity'], $product_price ) . '</span>', $cart_item, $cart_item_key ); ?>
                    </li>
                    <?php
                
            
        ?>

    <?php else : ?>

        <li class="empty"><?php _e( 'No products in the cart.', 'woocommerce' ); ?></li>

    <?php endif; ?>

</ul><!-- end product list -->

<?php if ( ! WC()->cart->is_empty() ) : ?>

    <p class="total"><strong><?php _e( 'Total', 'woocommerce' ); ?>:</strong> <?php echo WC()->cart->get_cart_subtotal(); ?></p>

    <?php do_action( 'woocommerce_widget_shopping_cart_before_buttons' ); ?>

    <p class="buttons">
        <!-- <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="button wc-forward"><?php _e( 'View Cart', 'woocommerce' ); ?></a> -->
        <a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="btn btn-default" id="minicart-btn"><?php _e( 'Checkout', 'woocommerce' ); ?></a>
    </p>

<?php endif; ?>

<?php do_action( 'woocommerce_after_mini_cart' ); ?>

【问题讨论】：

getbootstrap.com/javascript/#affix

【参考方案1】：

使用一些 jQuery！我是凭记忆写的，但如果它不起作用，它至少能让你开始。

    (function($) // closure to use $, instead of jQuery
        $(document).ready(function() // wait for it...

            $(window).scroll(function() // Listen for scrolling
                if( $(window).scrollTop > 91 )
                    $("#secondary").css"top","0";
                else
                    $("#secondary").css"top","91px";
                
            );
        );
    )(jQuery);

https://api.jquery.com/scrollTop/