彼此之间有两个Metronic粘性面板。它与上面的粘性面板重叠

时间:2019-12-17 09:30:46

标签: javascript html css metronic

我对Keenthemes Metronic有疑问。模板的实时演示:https://keenthemes.com/metronic/preview/demo4/components/extended/sticky-panels.html(我对此粘性面板组件有疑问)。

我想将这些面板中的两个放置在一起。如下面的屏幕快照所示,这是可能的:

enter image description here

滚动并刷新页面时出现问题。如果您滚动回到顶部,您将得到这个。

It overlaps the sticky panel above

它与上面的粘性面板重叠。

        <!-- 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>

希望您能帮助我。谢谢!

0 个答案:

没有答案