我对Keenthemes Metronic有疑问。模板的实时演示:https://keenthemes.com/metronic/preview/demo4/components/extended/sticky-panels.html(我对此粘性面板组件有疑问)。
我想将这些面板中的两个放置在一起。如下面的屏幕快照所示,这是可能的:
滚动并刷新页面时出现问题。如果您滚动回到顶部,您将得到这个。
它与上面的粘性面板重叠。
<!-- Sticky Navigation Portlet -->
<div class="kt-portlet sticky" data-sticky="true" data-margin-top="60px" data-sticky-for="1023" data-sticky-class="kt-sticky">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="fa fa-bars"></i>
</span>
<h3 class="kt-portlet__head-title">Menu</h3>
</div>
</div>
<!-- Desktop Navigation -->
<div class="kt-portlet__body kt-portlet__body--fit d-none d-md-block">
<ul class="kt-nav kt-nav--v3 nav nav-tabs" id="navigation">
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-view');?>" id="section-view-target">
<span class="kt-nav__link-icon"><i class="fa fa-home"></i></span>
<span class="kt-nav__link-text">Voorblad</span>
</a>
</li>
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-letter');?>" id="section-letter-target">
<span class="kt-nav__link-icon"><i class="fa fa-envelope"></i></span>
<span class="kt-nav__link-text">Brief</span>
</a>
</li>
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-workflow');?>" id="section-workflow-target">
<span class="kt-nav__link-icon"><i class="fa fa-hammer"></i></span>
<span class="kt-nav__link-text">Werkwijze</span>
</a>
</li>
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-document');?>" id="section-document-target">
<span class="kt-nav__link-icon"><i class="fa fa-file-alt"></i></span>
<span class="kt-nav__link-text">Offerte</span>
</a>
</li>
</ul>
</div>
<!-- Mobile Navigation -->
<div class="kt-portlet__body kt-portlet__body--fit d-block d-md-none">
<ul class="kt-nav kt-nav--v3 nav nav-tabs">
<li class="kt-nav__item active">
<a class="kt-nav__link" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
<span class="kt-nav__link-icon"><i class="fa fa-home"></i></span>
<span class="kt-nav__link-text">Voorblad <i class="fa fa-caret-down ml-2"></i></span>
</a>
</li>
<div class="collapse" id="collapse1">
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-view');?>">
<span class="kt-nav__link-icon"><i class="fa fa-envelope"></i></span>
<span class="kt-nav__link-text">Brief</span>
</a>
</li>
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-workflow');?>">
<span class="kt-nav__link-icon"><i class="fa fa-hammer"></i></span>
<span class="kt-nav__link-text">Werkwijze</span>
</a>
</li>
<li class="kt-nav__item">
<a class="kt-nav__link scroll" href="<?php echo $request->getUriForPath('/documenten/offerte-dummy/1#section-document');?>">
<span class="kt-nav__link-icon"><i class="fa fa-file-alt"></i></span>
<span class="kt-nav__link-text">Offerte</span>
</a>
</li>
</div>
</ul>
</div>
</div>
<!-- Sticky Agree Button Portlet -->
<div class="kt-portlet sticky agree_portlet d-none d-md-block" data-sticky="true" data-margin-top="393px" data-sticky-for="1023" data-sticky-class="kt-sticky">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="fa fa-check"></i>
</span>
<h3 class="kt-portlet__head-title">Akkoord</h3>
</div>
</div>
<div class="kt-portlet__body kt-portlet__body">
<button type="button" class="btn btn-primary animated infinite pulse slow agree_button">
<i class="fa fa-check-circle"></i> Ik ga akkoord
</button>
</div>
</div>
希望您能帮助我。谢谢!