我刚刚使用左侧固定的导航栏创建了一组复选框。我希望这个菜单像粘性一样。这怎么可能。
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>当我滚动页面时，菜单应该具有粘性。我试过了，但没有用。
注意:在宽屏幕上检查此代码以获得更好的结果。可能会在片段中混淆。
这是这段代码的结果。
如何实现粘性菜单？
提前致谢。
最佳答案
您需要使用固定位置并将其添加到滚动:
添加 jQuery:
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
为固定位置和最大宽度添加 CSS 类，否则 width:100% + position: fixed 元素将占据窗口全宽。注意 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');
}
});
关于javascript - 使用 JavaScript 滚动时如何将左侧菜单设置为粘性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47455987/