0

基本的に、メニューを開くリンクがあり、ウィンドウが特定のポイントを超えてスクロールすると、画面の上部に固定されます。閉じてからもう一度スクロールすると、再び開いて固定されます。概念的にそれが起こっている理由を知っており、いくつかのことを試しましたが、機能させることができません。以下のコード (JS のみ)。スクロールしても閉じて再表示されないようにするだけです。事前に感謝し、ばかげた質問であれば申し訳ありません。

HTML

<div class="feedback">Share For Feedback</div>
<div class="dropdown"> 
    <p>Share it !!!</p> 
    <span> 
        <a href="#" class="closedrop">X</a>
    </span>
    <div class="share-icon-holder"> 
        <span class="spr share-icon fb"> 1 </span>
        <span class="spr share-icon tw"> 2 </span>
        <span class="spr share-icon mail "> 3 </span>
        <span class="spr share-icon copy"> 4 </span>
    </div>
 </div>

JQuery

function showSticky() {
var feedback = $('.feedback'),
dropdown = $('.dropdown'),
myloveitfirstrow = $('.my-love-it-product:first'),
closedrop = $('.closedrop'),
hasBeenClicked = false;

$(feedback).click(function () {
    $(this).data('clicked', true);
    $(dropdown).show();
    $(window).scroll(function () {
        var midheight = $(myloveitfirstrow).outerHeight(true),
        scrollVal = $(this).scrollTop();

        if (scrollVal > midheight) {
            $(dropdown).css({ 'position': 'fixed', 'top': '0', 'left': '0', 'display': 'block', 'z-index': '400', 'text-align': 'center', 'width': '100%', 'height': '100px' });
        } else {
            $(dropdown).css({ 'position': 'absolute', 'top': '50px', 'left': '-100px' });
        }
     });
 });

 $(closedrop).click(function () {
     hasBeenClicked = true;
     $(dropdown).hide();
 });
}
4

2 に答える 2

1 
if (scrollVal > midheight) {
    $(dropdown).css({ 'position': 'fixed', 'top': '0', 'left': '0'/*, 'display': 'block'*/, 'z-index': '400', 'text-align': 'center', 'width': '100%', 'height': '100px' });
} else {
    $(dropdown).css({ 'position': 'absolute', 'top': '50px', 'left': '-100px' });
}

上記の変更を加えても、それでも機能しますか？display: block位置が固定されている限り設定されていたをコメントアウトしました。それはそれを再び見せるでしょう。

于 2013-07-31T19:41:04.627 に答える
0

メニューが再び閉じられたら、スクロール イベントをオフにする必要があります。最初に、スクロール イベントがトリガーされた後に呼び出される関数を作成することができます。

function scrollHandler() {
    // Add your code here
}

ユーザーがメニューを開いた後にイベントを有効にします。

$(feedback).click(function () {
    $(dropdown).show();
    $(window).on('scroll', scrollHandler);
})

最後に、メニューが再び閉じられたときにスクロール イベント ハンドラーをオフにします。

$(closedrop).click(function () {
    $(dropdown).hide();
    $(window).off('scroll', scrollHandler);
});
于 2013-07-31T19:46:19.880 に答える