javascript - 如何在一段时间内固定特定部分的位置？

Question

我想了解我们如何暂时固定特定部分的位置，就像下面的示例一样。

https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT32LL/A&option.watch_bands=MXP02AM/A&preSelect=false&product=Z0YQ&step=detail#

在上面的链接中，苹果手表产品是固定的，而右边的内容有一定程度的移动，然后整个页面移动。

我尝试通过提供类sticky-top来固定左侧来解决这个问题

<h1 class="poolProductTitle text-center">Browse Premium Products</h1>
<section class="mainContainer ">
   <div class="row">
      <div class="col-sm-2 text-left left sticky-top">
         <h3 class="font-weight-normal mb-3 filterTitle">Filters </h3>
         <!-- gender :radio -->
         <div id="gender">
            <h5 class="font-weight-normal mb-3">Gender </h5>
            <div class="custom-control custom-radio mb-2">
               <input type="radio" id="male" name="customRadio" class="custom-control-input">
               <label class="custom-control-label text-uppercase" for="male">men</label>
            </div>
            <div class="custom-control custom-radio mb-2">
               <input type="radio" id="female" name="customRadio" class="custom-control-input">
               <label class="custom-control-label text-uppercase" for="female">women</label>
            </div>
            <div class="custom-control custom-radio mb-2">
               <input type="radio" id="unisex" name="customRadio" class="custom-control-input">
               <label class="custom-control-label text-uppercase" for="unisex">unisex</label>
            </div>
         </div>
         <br>
         <!-- brand :checkbox  -->
         <div id="gender">
            <h5 class="font-weight-normal mb-3">Brand </h5>
            <div class="custom-control custom-checkbox mb-2">
               <input type="checkbox" class="custom-control-input" id="rolex">
               <label class="custom-control-label text-uppercase" for="rolex">rolex</label>
            </div>
            <div class="custom-control custom-checkbox mb-2">
               <input type="checkbox" class="custom-control-input" id="nike">
               <label class="custom-control-label text-uppercase" for="nike">nike</label>
            </div>
            <div class="custom-control custom-checkbox mb-2">
               <input type="checkbox" class="custom-control-input" id="adidas">
               <label class="custom-control-label text-uppercase" for="adidas">adidas</label>
            </div>
            <div class="custom-control custom-checkbox mb-2">
               <input type="checkbox" class="custom-control-input" id="dell">
               <label class="custom-control-label text-uppercase" for="dell">dell</label>
            </div>
            <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="apple">
                  <label class="custom-control-label text-uppercase" for="apple">apple</label>
               </div>
               <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="canon">
                  <label class="custom-control-label text-uppercase" for="canon">canon</label>
               </div>
               <div class="custom-control custom-checkbox mb-3">
                  <input type="checkbox" class="custom-control-input" id="fils">
                  <label class="custom-control-label text-uppercase" for="fils">fils</label>
               </div>
         </div>
      </div>
      <!-- end of left side container containg filter  -->
      <!-- product section  -->
      <div class="col-sm-10 right ">
         <!-- Basic dropdown  sort  -->
         <div class="row">
            <div class="col-sm-12">
               <div class="sort-sortBy float-right">
                  <!-- react-text: 325 -->Sort by :
                  <!-- /react-text -->
                  <span>Popularity</span>
                  <span class="">
                  <i class="fas fa-sort-down sort-downArrow"></i>
                  </span>
                  <ul class="sort-list">
                     <li>
                        <label class="sort-label ">
                           <input type="radio" value="new">
                           <!-- react-text: 332 -->What's New
                           <!-- /react-text -->
                        </label>
                     </li>
                     <li>
                        <label class="sort-label sort-selected">
                           <input type="radio" value="popularity">
                           <!-- react-text: 336 -->Popularity
                           <!-- /react-text -->
                        </label>
                     </li>
                     <li>
                        <label class="sort-label ">
                           <input type="radio" value="discount">
                           <!-- react-text: 340 -->Better Discount
                           <!-- /react-text -->
                        </label>
                     </li>
                     <li>
                        <label class="sort-label ">
                           <input type="radio" value="price_desc">
                           <!-- react-text: 344 -->Price: High to Low
                           <!-- /react-text -->
                        </label>
                     </li>
                     <li>
                        <label class="sort-label ">
                           <input type="radio" value="price_asc">
                           <!-- react-text: 348 -->Price: Low to High
                           <!-- /react-text -->
                        </label>
                     </li>
                     <li>
                        <label class="sort-label ">
                           <input type="radio" value="delivery_time">
                           <!-- react-text: 352 -->Faster Delivery
                           <!-- /react-text -->
                        </label>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
         <!-- end of Basic dropdown : sort -->
         <!-- products section  -->
         <div class="row my-5"> ...
</div>

标签： javascriptphphtmlcssbootstrap-4

Answer 1

您可以通过将容器分成两个垂直部分并将左侧的 css 应用为

.left{
position :fixed;
}