Question

我正在努力让手风琴活动面板滚动到窗口顶部，以便可点击的手风琴<h3>标签滚动到顶部，<h3>标签内容放在下面，我有点像实现这一目标但并非完全如此。

我有一个淡入淡出功能已经设置在标题上，滚动功能在滚动时隐藏标题，我遇到的问题是，当点击其他手风琴标签时，有时标题重新出现在手风琴上，这取决于手风琴功能的行为，即当内容向下滑动而不是向上滑动时，它会自动显示我的标题会阻挡相应<h3>标签和内容的视图，因为它使用我之前的淡入淡出功能标题？

我怎样才能做到这一点，当点击的手风琴面板打开时，在整个手风琴元素没有任何面板激活之前，我的标题不可能重新出现？我知道手风琴函数有一个.ui-state-active类，我可以使用它来触发关闭/打开标题，同时手风琴处于活动状态，任何面板打开标题保持隐藏状态，直到函数返回其活动状态：false状态当所有面板关闭时？

由于

$(function () {
    var icons = {
        header: "ui-icon-circle-plus",
        activeHeader: "ui-icon-circle-arrow-e"
    };
    $('#accordion').accordion({
        autoHeight: false,
        autoFill: true,
        collapsible: true,
        event: 'click',
        active: false,
        icons: icons,
        animate: 300 // collapse will take 300ms
    });
    $('#accordion h3').bind('click', function () {
        var self = this;
        setTimeout(function () {
            theOffset = $(self).offset();
            $('body,html').animate({ scrollTop: theOffset.top });
        }, 310); // ensure the collapse animation is done
    });


});
$(function () {
    var header = $('header');

    $('#accordion h3').on('click', function () {
        if ($('#accordion h3').hasClass('ui-state-active')) header.hide();
        else if ($('#accordion h3').hasClass(!'ui-state-active')) header.show();

    });
});

$(function () {
    'use strict';
    var lastscrolltop = 0;
    //header scroll
    $(document).on('scroll', function () {
        var st = $(document).scrollTop(),
        dElem = $(document),
        header = $('header');

        if (st > lastscrolltop)
            header.fadeOut(500);
        else
            header.fadeIn(500);
        lastscrolltop = st;
    });
});

body {
    width: 300px;
}

#container {
    height: auto;
    width: 300px;
}

#slider-home {
    height: 100vh;
    width: auto;
    background: blue;
}

header {
    width: 300px;
    position: fixed;
    height: 70px;
    background: red;
    z-index: 9;
}

#accordion {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 0;
    min-height: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<body>
    <div class="container">
        <header></header>
        <main role="main">
            <section>
                <div id="slider-home" class="vhslider">
                </div>
            </section>
            <div id="accordion">

                <h3>Photographic Services</h3>
                <div>
                    <p>
                        Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                        Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                    </p>
                    <figure></figure>
                </div>

                <h3>Product Photography</h3>
                <div>
                    <p>
                        Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                        Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                    </p>
                    <figure></figure>
                </div>

                <h3>e-commerce Photography</h3>
                <div>
                    <p>
                        Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                        Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                    </p>
                    <figure></figure>
                </div>

                <h3>Food Photography</h3>
                <div>
                    <p>
                        Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                        Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                    </p>
                    <figure></figure>
                </div>

                <h3>Lifestyle Photography</h3>
                <div>
                    <p>
                        Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                        Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                    </p>
                    <figure></figure>
                </div>

            </div> <!--- end of accordion id --->

        </main>
    </div>
</body>

选择jquery手风琴活动面板

0 个答案: