1

私は stickyfloat.js を使用して .bottom_content div をページの下部に保持しているため、ブラウザー ウィンドウが小さい場合に重要な要素がカバーされません。ただし、青いdivにトグルボタンを追加したいと思います（「重要なテキストはここに移動します」と表示されている場合、divをウィンドウの下部に送信し、ユーザーが下にスクロールするまで、ページ要素を表示ウィンドウ領域の下に保ちます望ましい結果は次のようになります。

また、トグル ボタンは stickyfloat のバインドを解除して、ページがリロードされるか、トグル ボタンが再度クリックされるまで、ページ スクロール時に .bottom_content の再配置を停止する必要があります。

私が得た最も遠いものはこれでした：

$('#minimize').toggle(function(){
    $cur_pos = $('.bottom_content').offset().top;
        $('.bottom_content').css({'top' : $cur_pos+147+'px'});
    }, function () {
    $('.bottom_content').css({ 'top' : 160+'px'});
});

しかし、問題があります。私はjQueryの達人ではないので、助けが必要です。

正午のコーヒーを飲みながらコードを見たい人のために、作業バージョンとjsfiddleをアップロードしました。前もって感謝します。

4

1 に答える 1

1

stickyfloat にはトグル メソッドがないため、このタスクにはもう少し手間がかかります。再度開始する必要があります。結果は簡単です。スライダーが表示されている場合は非表示になり、非表示になっている場合は表示されます。たぶん、コードがより役立つでしょう:

$('#minimize').click(function() {
  $bottom = $('.bottom_content');
  if ($bottom.hasClass('bottom_content_home')) {
    // remove stickyfloat
    $bottom.css('top', 'auto').stickyfloat('destroy');
  } else {
    // re-initiate stickyfloat (taken from your scripts)
    $bottom.stickyfloat({
      duration: 0,
      stickToBottom: true
    });
  }
  // hide slider
  $('.bc_slider').toggle();
  // this class controls css option 'padding-top'
  $bottom.toggleClass('bottom_content_home');
});

たぶん、これは少なくとも何らかの形で役立つでしょう。

于 2013-07-17T17:21:35.097 に答える