使用JavaScript滾動時如何將左菜單設置為粘性

Question

我剛剛使用固定的導航欄創建了一組復選框。 我希望此菜單具有粘性。 怎么可能。

 var acc = document.getElementsByClassName("accord"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ var panel = this.nextElementSibling; if (panel.style.display === "none") { panel.style.display = "block"; } else { panel.style.display = "none"; } } } 

 *{ padding: 0; margin: 0; } .navbar-fixed-left{ background-color: #fff; border-radius: 0; border-color: transparent; position: absolute; left: 0; top: 0; width: 100%; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.14); } .panel-heading{ background-color: transparent !important; padding: 10px 15px 10px 25px; } .panel-group{ margin-top: 10px; } .panel{ border: none; border-radius: 0; } .panel-body{ border: none !important; padding: 15px 15px 15px 25px; } .catg-lists{ padding-left: 10px; padding-bottom: 18px; } .catg-lists li{ list-style-type: none; margin-bottom: 4px; color: #838383; font-size: 16px; text-transform: capitalize; } .catg-lists li input[type=checkbox]{ margin-right: 6px; } .cat-menu{ padding: 8px 15px 8px 4px; border-bottom: 2px solid #359443; } .cat-menu span{ text-transform: capitalize; font-size: 15px; font-weight: 600; color: #292929; padding: 2px 20px 6px 5px; border-bottom: 2px solid #458b53; } .cat-menu:hover, .cat-menu:active, .cat-menu:visited, .cat-menu:focus{ text-decoration: none; } .accord { display: block; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; position: relative; } .accord i{ position: absolute; right: 30px; top: 22px; color: #349342; } div.panel { padding: 0 18px; background-color: white; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="photo-gall"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4"> <div class="navbar navbar-inverse navbar-fixed-left"> <div class="panel-group" id="accordion"> <a class="cat-menu accord"> <span>category</span><i class="fa fa-caret-down"></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">fruits & vegetables</li> <li><input type="checkbox">fresh fruits <span>(87)</span></li> <li><input type="checkbox">fresh vegetables <span>(191)</span></li> <li><input type="checkbox">international fruits & vegetables <span>(128)</span></li> <li><input type="checkbox">organic fruits & vegetables <span>(50)</span></li> </ul> </div> <a class="cat-menu accord"> <span>price</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">Less than rs 20 <span>(53)</span></li> <li><input type="checkbox">rs 21 to rs 50 <span>(164)</span></li> <li><input type="checkbox">rs 51 to rs 100<span>(126)</span></li> <li><input type="checkbox">rs 101 to rs 200 <span>(77)</span></li> <li><input type="checkbox">rs 201 to rs 500 <span>(62)</span></li> <li><input type="checkbox">more than rs 501 <span>(27)</span></li> </ul> </div> <a class="cat-menu accord"> <span>pack size</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">100 grams <span>(53)</span></li> <li><input type="checkbox">200 grams <span>(164)</span></li> <li><input type="checkbox">300 grams<span>(126)</span></li> <li><input type="checkbox">500 grams <span>(77)</span></li> <li><input type="checkbox">750 grams <span>(62)</span></li> <li><input type="checkbox">1 Kg <span>(27)</span></li> <li><input type="checkbox">2 Kg <span>(43)</span></li> <li><input type="checkbox">combo - 2 items<span>(0)</span></li> <li><input type="checkbox">combo - 3 items<span>(50)</span></li> <li><input type="checkbox">combo - 4 items<span>(10)</span></li> </ul> </div> <a class="cat-menu accord"> <span>discounts</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">10%-20%</li> <li><input type="checkbox">30%-40%</li> <li><input type="checkbox">50%</li> <li><input type="checkbox">60%-70%</li> <li><input type="checkbox">80%-90%</li> </ul> </div> </div> </div> </div> <div class="col-xs-12 col-sm-8"> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> </div> </div> </div> </section> 

當我滾動頁面時，菜單應具有粘性。 我試過了，但是沒有用。

注意：在寬屏幕上檢查此代碼可獲得更好的結果。 可能會混淆代碼段。

這是此代碼的結果。

如何獲得即時貼菜單？

提前致謝。

Answer 1

您需要使用固定位置並將其添加到滾動條上：

添加jQuery：

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

為固定位置和最大寬度添加CSS類，否則用width：100％+ position：固定元素將采用窗口全寬。 固定時請注意left：auto，否則用left：0它將一直移到最左邊：

.navbar-fixed-left{
    background-color: #fff;
    border-radius: 0;
    border-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 350px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.14);
}
.navbar-fixed-left.fixed{
  position: fixed;
  top:0;
  left: auto;
}

添加JS以檢測滾動頁面並添加類：

var $sidebar = jQuery('.navbar-fixed-left'),
    $window = jQuery(window),
    offset = $sidebar.offset();
$window.scroll(function() {
    if ($window.scrollTop() > offset.top) {
        $sidebar.addClass('fixed');
    } else {
        $sidebar.removeClass('fixed');
    }
});

Answer 2

添加該CSS：

div#accordion {
    position: fixed;
    background: black;
}

並刪除類：

navbar navbar-inverse navbar-fixed-left

並在移除位置添加媒體查詢：固定 （我沒有添加媒體查詢，但必須添加）

 var acc = document.getElementsByClassName("accord"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function(){ var panel = this.nextElementSibling; if (panel.style.display === "none") { panel.style.display = "block"; } else { panel.style.display = "none"; } } } 

 *{ padding: 0; margin: 0; } .navbar-fixed-left{ background-color: #fff; border-radius: 0; border-color: transparent; position: absolute; left: 0; top: 0; width: 100%; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.14); } .panel-heading{ background-color: transparent !important; padding: 10px 15px 10px 25px; } .panel-group{ margin-top: 10px; } .panel{ border: none; border-radius: 0; } .panel-body{ border: none !important; padding: 15px 15px 15px 25px; } .catg-lists{ padding-left: 10px; padding-bottom: 18px; } .catg-lists li{ list-style-type: none; margin-bottom: 4px; color: #838383; font-size: 16px; text-transform: capitalize; } .catg-lists li input[type=checkbox]{ margin-right: 6px; } .cat-menu{ padding: 8px 15px 8px 4px; border-bottom: 2px solid #359443; } .cat-menu span{ text-transform: capitalize; font-size: 15px; font-weight: 600; color: #292929; padding: 2px 20px 6px 5px; border-bottom: 2px solid #458b53; } .cat-menu:hover, .cat-menu:active, .cat-menu:visited, .cat-menu:focus{ text-decoration: none; } .accord { display: block; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; position: relative; } .accord i{ position: absolute; right: 30px; top: 22px; color: #349342; } div.panel { padding: 0 18px; background-color: white; } div#accordion { position: fixed; background: black; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <section id="photo-gall"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4"> <div class=""> <div class="panel-group" id="accordion"> <a class="cat-menu accord"> <span>category</span><i class="fa fa-caret-down"></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">fruits & vegetables</li> <li><input type="checkbox">fresh fruits <span>(87)</span></li> <li><input type="checkbox">fresh vegetables <span>(191)</span></li> <li><input type="checkbox">international fruits & vegetables <span>(128)</span></li> <li><input type="checkbox">organic fruits & vegetables <span>(50)</span></li> </ul> </div> <a class="cat-menu accord"> <span>price</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">Less than rs 20 <span>(53)</span></li> <li><input type="checkbox">rs 21 to rs 50 <span>(164)</span></li> <li><input type="checkbox">rs 51 to rs 100<span>(126)</span></li> <li><input type="checkbox">rs 101 to rs 200 <span>(77)</span></li> <li><input type="checkbox">rs 201 to rs 500 <span>(62)</span></li> <li><input type="checkbox">more than rs 501 <span>(27)</span></li> </ul> </div> <a class="cat-menu accord"> <span>pack size</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">100 grams <span>(53)</span></li> <li><input type="checkbox">200 grams <span>(164)</span></li> <li><input type="checkbox">300 grams<span>(126)</span></li> <li><input type="checkbox">500 grams <span>(77)</span></li> <li><input type="checkbox">750 grams <span>(62)</span></li> <li><input type="checkbox">1 Kg <span>(27)</span></li> <li><input type="checkbox">2 Kg <span>(43)</span></li> <li><input type="checkbox">combo - 2 items<span>(0)</span></li> <li><input type="checkbox">combo - 3 items<span>(50)</span></li> <li><input type="checkbox">combo - 4 items<span>(10)</span></li> </ul> </div> <a class="cat-menu accord"> <span>discounts</span><i class="fa fa-caret-down" ></i></a> <div class="panel"> <ul class="catg-lists"> <li><input type="checkbox">10%-20%</li> <li><input type="checkbox">30%-40%</li> <li><input type="checkbox">50%</li> <li><input type="checkbox">60%-70%</li> <li><input type="checkbox">80%-90%</li> </ul> </div> </div> </div> </div> <div class="col-xs-12 col-sm-8"> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> </div> </div> </div> </section> 

Answer 3

由於.navbar具有以下position: relative; 我要添加幾個屬性：

.panel-group or #accordion
{
    position: fixed;
    height: 100%;
    overflow: scroll;
}